React 生命周期
2016-03-16 16:15
375 查看
来源 1
一、组件的生命周期分成三个状态:
挂载: Mounting:已插入真实 DOM
更新: Updating:正在被重新渲染
挂载: Unmounting:已移出真实 DOM
二、React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计 五种处理函数:
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
三、此外,React 还提供 两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
简单的demo
上面代码在hello组件加载以后,通过
另外,组件的style属性的设置方式也值得注意,不能写成
而要写成
四、组件的详细说明(Component Specifications)
来源2
当通过调用
1、render
你也可以返回
2、getInitialState
在组件挂载之前调用一次。返回值将会作为
3、getDefaultProps
在组件类创建的时候调用一次,然后返回值被缓存下来。如果父组件没有指定
该方法在任何实例创建之前调用,因此不能依赖于
4、propTypes
5、mixins
6、statics
在这个块儿里面定义的方法都是静态的,意味着你可以在任何组件实例创建之前调用它们,这些方法不能获取组件的
7、displayName
8、生命周期方法
许多方法在组件生命周期中某个确定的时间点执行。
a、挂载: componentWillMount
服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。如果在这个方法内调用
b、挂载: componentDidMount
在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。在生命周期中的这个时间点,组件拥有一个
如果想和其它
注意:
为了兼容 v0.9,DOM 节点作为最后一个参数传入。你依然可以通过 this.getDOMNode() 获取 DOM 节点。
c、更新: componentWillReceiveProps
在组件接收到新的
用此函数可以作为
注意:
对于 state,没有相似的方法:
d、更新: shouldComponentUpdate
在接收到新的
如果确定新的
如果
默认情况下,
如果性能是个瓶颈,尤其是有几十个甚至上百个组件的时候,使用
e、更新: componentWillUpdate
在接收到新的
使用该方法做一些更新之前的准备工作。
注意:
你不能在刚方法中使用
e、更新: componentDidUpdate
在组件的更新已经同步到
使用该方法可以在组件更新之后操作
注意:
为了兼容 v0.9,DOM 节点会作为最后一个参数传入。如果使用这个方法,你仍然可以使用 this.getDOMNode() 来访问 DOM 节点。
f、移除: componentWillUnmount
在组件从
在该方法中执行任何必要的清理,比如无效的定时器,或者清除在
一、组件的生命周期分成三个状态:
挂载: Mounting:已插入真实 DOM
更新: Updating:正在被重新渲染
挂载: Unmounting:已移出真实 DOM
二、React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计 五种处理函数:
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
三、此外,React 还提供 两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
简单的demo
<div id="demo1"></div> <script type="text/jsx"> var Hello = React.createClass({ getInitialState: function () { return { opacity: 1.0 } }, componentWillMount: function () { console.log("Will mounted"); }, shouldComponentUpdate: function () { console.log("should Component Update"); //return true; }, componentWillReceiveProps: function (nextProps) { console.log(nextProps); }, componentWillUpdate: function (nextProps, nextState) { //console.log(nextProps); //world //console.log(nextState); //opacity //console.log("component Will Update"); }, componentDidUpdate: function(prevProps, prevState ){ //console.log(prevProps); //world //console.log(prevState); //opacity //console.log("component Did Update"); }, componentDidMount: function () { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= 0.05; if (opacity < 0.1) { opacity = 1.0; } this.setState({opacity: opacity}); }.bind(this), 100); if (this.isMounted) { console.log("isMounted"); } }, render: function () { return ( <div style={{opacity: this.state.opacity}}> Hello {this.props.name} {this.state.opacity} </div> ) } }); React.render( <Hello name="world"/>, document.getElementById('demo1') ) </script>
上面代码在hello组件加载以后,通过
componentDidMount方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。
另外,组件的style属性的设置方式也值得注意,不能写成
style="opacity:{this.state.opacity};"
而要写成
style={{opacity: this.state.opacity}}
四、组件的详细说明(Component Specifications)
来源2
当通过调用
React.createClass()来创建组件的时候,你应该提供一个包含
render方法的对象,并且也可以包含其它的在这里描述的生命周期方法。
1、render
ReactComponent render()
render()方法是必须的。当调用的时候,会检测
this.props和
this.state,返回一个单子级组件。该子级组件可以是虚拟的本地
DOM组件(比如
<div />或者
React.DOM.div()),也可以是自定义的复合组件。
你也可以返回
null或者
false来表明不需要渲染任何东西。实际上,
React渲染一个
<noscript>标签来处理当前的差异检查逻辑。当返回
null或者
false的时候,
this.getDOMNode()将返回
null。
render()函数应该是纯粹的,也就是说该函数不修改组件
state,每次调用都返回相同的结果,不读写
DOM信息,也不和浏览器交互(例如通过使用
setTimeout)。如果需要和浏览器交互,在
componentDidMount()中或者其它生命周期方法中做这件事。保持
render()纯粹,可以使服务器端渲染更加切实可行,也使组件更容易被理解。
2、getInitialState
object getInitialState()
在组件挂载之前调用一次。返回值将会作为
this.state的初始值。
3、getDefaultProps
object getDefaultProps()
在组件类创建的时候调用一次,然后返回值被缓存下来。如果父组件没有指定
props中的某个键,则此处返回的对象中的相应属性将会合并到
this.props(使用
in检测属性)。
该方法在任何实例创建之前调用,因此不能依赖于
this.props。另外,
getDefaultProps()返回的任何复杂对象将会在实例间共享,而不是每个实例拥有一份拷贝。
4、propTypes
object propTypes
propTypes对象允许验证传入到组件的
props。更多关于
propTypes的信息,参考可重用的组件。
5、mixins
array mixins
mixin数组允许使用混合来在多个组件之间共享行为。更多关于混合的信息,参考可重用的组件。
6、statics
object statics
statics对象允许你定义静态的方法,这些静态的方法可以在组件类上调用。例如:
var MyComponent = React.createClass({ statics: { customMethod: function(foo) { return foo === 'bar'; } }, render: function() { } }); MyComponent.customMethod('bar'); // true
在这个块儿里面定义的方法都是静态的,意味着你可以在任何组件实例创建之前调用它们,这些方法不能获取组件的
props和
state。如果你想在静态方法中检查
props的值,在调用处把
props作为参数传入到静态方法。
7、displayName
string displayName
displayName字符串用于输出调试信息。JSX 自动设置该值;参考JSX 深入。
8、生命周期方法
许多方法在组件生命周期中某个确定的时间点执行。
a、挂载: componentWillMount
componentWillMount()
服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。如果在这个方法内调用
setState,
render()将会感知到更新后的
state,将会执行仅一次,尽管
state改变了。
b、挂载: componentDidMount
componentDidMount()
在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。在生命周期中的这个时间点,组件拥有一个
DOM展现,你可以通过
this.getDOMNode()来获取相应
DOM节点。
如果想和其它
JavaScript框架集成,使用
setTimeout或者
setInterval来设置定时器,或者发送
AJAX请求,可以在该方法中执行这些操作。
注意:
为了兼容 v0.9,DOM 节点作为最后一个参数传入。你依然可以通过 this.getDOMNode() 获取 DOM 节点。
c、更新: componentWillReceiveProps
componentWillReceiveProps(object nextProps)
在组件接收到新的
props的时候调用。在初始化渲染的时候,该方法不会调用。
用此函数可以作为
react在
prop传入之后,
render()渲染之前更新
state的机会。老的
props可以通过
this.props获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。
componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); }
注意:
对于 state,没有相似的方法:
componentWillReceiveState。将要传进来的
prop可能会引起
state改变,反之则不然。如果需要在
state改变的时候执行一些操作,请使用
componentWillUpdate。
d、更新: shouldComponentUpdate
boolean shouldComponentUpdate(object nextProps, object nextState)
在接收到新的
props或者
state,将要渲染之前调用。该方法在初始化渲染的时候不会调用,在使用
forceUpdate方法的时候也不会。
如果确定新的
props和
state不会导致组件更新,则此处应该 返回
false。
shouldComponentUpdate: function(nextProps, nextState) { return nextProps.id !== this.props.id; }
如果
shouldComponentUpdate返回
false,则
render()将不会执行,直到下一次
state改变。(另外,
componentWillUpdate和
componentDidUpdate也不会被调用。)
默认情况下,
shouldComponentUpdate总会返回
true,在
state改变的时候避免细微的
bug,但是如果总是小心地把
state当做不可变的,在
render()中只从
props和
state读取值,此时你可以覆盖
shouldComponentUpdate方法,实现新老
props和
state的比对逻辑。
如果性能是个瓶颈,尤其是有几十个甚至上百个组件的时候,使用
shouldComponentUpdate可以提升应用的性能。
e、更新: componentWillUpdate
componentWillUpdate(object nextProps, object nextState)
在接收到新的
props或者
state之前立刻调用。在初始化渲染的时候该方法不会被调用。
使用该方法做一些更新之前的准备工作。
注意:
你不能在刚方法中使用
this.setState()。如果需要更新
state来响应某个
prop的改变,请使用
componentWillReceiveProps。
e、更新: componentDidUpdate
componentDidUpdate(object prevProps, object prevState)
在组件的更新已经同步到
DOM中之后立刻被调用。该方法不会在初始化渲染的时候调用。
使用该方法可以在组件更新之后操作
DOM元素。
注意:
为了兼容 v0.9,DOM 节点会作为最后一个参数传入。如果使用这个方法,你仍然可以使用 this.getDOMNode() 来访问 DOM 节点。
f、移除: componentWillUnmount
componentWillUnmount()
在组件从
DOM中移除的时候立刻被调用。
在该方法中执行任何必要的清理,比如无效的定时器,或者清除在
componentDidMount中创建的
DOM元素。
相关文章推荐
- iOS开发之旅--React native使用IDE推荐webstorm
- MVVM Tutorial with ReactiveCocoa
- 抛开react,如何理解virtual dom和immutability
- React中state和props的区别
- react-native 学习之TextInput组件篇
- react native 开发环境配置
- React组件详细介绍及其生命周期函数
- react-native 学习之Image篇
- react、redux什么的都用起来 【1】我不是双向绑定
- ReactNative的组件架构设计
- React系列——React主要内容简介
- 把react什么的都用起来 【0】预备——开始
- react-native 在任意view fragment activity中集成react
- React-native 调用原生组件
- react-native 调用原生模块详解
- 解决ReactNative崩溃:Can't find variable: __fbBatchedBridge
- 我在集成ReactNative过程中踩过的那些坑
- windows安装React Native开发运行环境
- windows安装React Native开发运行环境
- 需要学习的一份React-Native指南