[React] React Fundamentals: Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will explore how to do that.
Updating: componentWillReceiveProps
componentWillReceiveProps(object nextProps)
Invoked when a component is receiving new props. This method is not called for the initial render.
Use this as an opportunity to react to a prop transition before render()
is called by updating the state using this.setState()
. The old props can be accessed via this.props
. Callingthis.setState()
within this function will not trigger an additional render.
Updating: shouldComponentUpdate
boolean shouldComponentUpdate(object nextProps, object nextState)
Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate
is used.
Use this as an opportunity to return false
when you're certain that the transition to the new props and state will not require a component update.
If shouldComponentUpdate
returns false, then render()
will be completely skipped until the next state change. (In addition, componentWillUpdate
and componentDidUpdate
will not be called.)
By default, shouldComponentUpdate
always returns true to prevent subtle bugs when state
is mutated in place, but if you are careful to always treat state
as immutable and to read only from props
and state
in render()
then you can override shouldComponentUpdate
with an implementation that compares the old props and state to their replacements.
If performance is a bottleneck, especially with dozens or hundreds of components, useshouldComponentUpdate
to speed up your app.
Updating: componentDidUpdate
componentDidUpdate(object prevProps, object prevState)
Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render.
Use this as an opportunity to operate on the DOM when the component has been updated.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Lesson 11: Component Lifecycle: Updating</title>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<style>
body {
margin: 25px;
}
</style>
</head>
<body>
<div id="panel"></div>
<script type="text/jsx">
/** @jsx React.DOM */
var APP =
React.createClass({
getInitialState:function(){
return {increasing:false}
},
update:function(){
var newVal = this.props.val+1
this.setProps({val:newVal})
},
componentWillReceiveProps:function(nextProps){
//Invoked when a component is receiving new props. This method is not called for the initial render.
//So when the counter increase, this method will be called
//works for props, not state
this.setState({increasing:nextProps.val>this.props.val})
},
shouldComponentUpdate: function( nextProps, nextState){
/*Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate is used. Use this as an opportunity to return false when you're certain that the transition to the new props and state will not require a component update.*/
console.log(nextProps.val);
//Only update every 5 times
return nextProps.val % 5 ===0;
},
render:function(){
console.log(this.state.increasing)
return (
<button
onClick={this.update}>
{this.props.val}
</button>
)
},
componentDidUpdate: function( prevProps, prevState){
console.log("prevProps ===" + JSON.stringify(prevProps));
}
}); React.renderComponent(
<APP val={0} />,
document.getElementById('panel')) </script>
</body>
</html>
https://facebook.github.io/react/docs/component-specs.html
[React] React Fundamentals: Component Lifecycle - Updating的更多相关文章
- [React Fundamentals] Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will ...
- [React Fundamentals] Component Lifecycle - Mounting Usage
The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...
- [React Fundamentals] Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
- [React ] React Fundamentals: Component Lifecycle - Mounting Usage
The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...
- [React] React Fundamentals: Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
- React.js Tutorial: React Component Lifecycle
Introduction about React component lifecycle. 1 Lifecycle A React component in browser can be any of ...
- React.createClass 、React.createElement、Component
react里面有几个需要区别开的函数 React.createClass .React.createElement.Component 首选看一下在浏览器的下面写法: <div id=" ...
- React 中的 Component、PureComponent、无状态组件 之间的比较
React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...
- React Native 中 component 生命周期
React Native 中 component 生命周期 转自 csdn 子墨博客 http://blog.csdn.net/ElinaVampire/article/details/518136 ...
随机推荐
- asp.net将数据库中的数据赋给DropDownList
当你选定一项进行其他操作时会重新绑定dropdownlist,这样会重新回到第一项,在page_load里加上判断if(!IsPostBack){'这里是你需要绑定dropdownlist的代码'}. ...
- linux下安装jira详细步骤
首先从官网下载jdk的安装包,将jdk的安装包上传到虚拟机或者服务器,在./usr/local/目录下面创建一个java目录:mkdir java 等等,具体祥看本文,希望对你有所帮助 linux下安 ...
- ThinkPHP3.2.3验证码显示、刷新、校验
显示验证码 首先在Home/Controller下创建一个公共控制器PublicController <?php namespace Home\Controller; use Think\Con ...
- Android 开发绕不过的坑:你的 Bitmap 究竟占多大内存?
0.写在前面 本文涉及到屏幕密度的讨论,这里先要搞清楚 DisplayMetrics 的两个变量,摘录官方文档的解释: density:The logical density of the displ ...
- 点点滴滴-NET下的常用框架
刘冬的博客:http://www.cnblogs.com/GoodHelper/category/214139.html (Spring.net和Nhibernate) Kyo-yo : http: ...
- KeyDown,KeyPress 和KeyUp
研究了一下KeyDown,KeyPress 和KeyUp ,发现之间还是有点学问的.让我们带着如下问题来说明,如果你看到这些问题你都知道,那么这篇文章你就当复习吧:) 1.这三个事件的顺序是怎么样的? ...
- 【POJ】2823 Sliding Window
单调队列. /* 2823 */ #include <iostream> #include <sstream> #include <string> #include ...
- MySQL 授权详解
(1)确认一下3306是否对外开放,mysql默认状态下是不开放对外访问功能的.查看的办法如下: 1 2 3 4 5 6 7 netstat -an | grep 3306 tcp 0 ...
- Win32下 Qt与Lua交互使用(三):在Lua脚本中connect Qt 对象
话接上文.笔者为了方便使用Lua,自己编写了一个Lua的类.主要代码如下: QLua.h #ifndef QLUA_H #define QLUA_H // own #include "inc ...
- Xcode 不提示, 引用失效等情况
在编写xcode的项目的时候出现过代码不高亮的症状,而且所有的warning都不再提示,include的内容也显示symbol not found,非常奇怪,解决方案如下: 方法一: 1.把.pch里 ...