ReactJS读书笔记二：组件生命周期

最新推荐文章于 2021-02-20 20:34:32 发布

似曾相识-

最新推荐文章于 2021-02-20 20:34:32 发布

阅读量300

点赞数

分类专栏： React 文章标签： react

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

React 组件就是一个状态机，它接受两个输入参数： this.props 和 this.state，返回一个虚拟DOM。

React组件的生命周期分几个阶段，每个阶段会有若干个回调函数可以响应不同的时刻。

组件生命周期

一创建类

React组件是有类和实例的区别的，通过 React.createClass 创建的是类，比如：

[javascript]view plaincopy 
    
 var List = React.createClass({  
   render: function() {}  
 });  

这里的List是一个类，在创建类的时候，只有一个回调 getDefaultProps 会被调用。这个函数返回一个对象，这个对象会以引用方式被所有的实例共享，注意，是引用，不是clone。

组件不允许修改自己的 props，只能通过父组件来修改。这是为了保持props的一致性。如果有需要自行修改的值，应该存在 this.state 中。

二实例化

类创建完成之后，就可以进行实例化。

实例化一个类，由如下过程组成：

getInitialState: 获取 this.state 的默认值
componentWillMount: 在render之前调用此方法，在render之前需要做的事情就在这里处理
render: 渲染并返回一个虚拟DOM
componentDidMount: 在render之后，react会使用render返回的虚拟DOM来创建真实DOM，完成之后调用此方法。

其中有几个点需要注意：

1，this.state 只存储原始数据，不要存储计算后的数据

比如 this.state.time = 1433245642536，那么就不要再存一个 this.state.timeString = ‘2015-06-02 19:47:22’ 因为这个是由 time 计算出来的，其实他不是一种state，他只是 this.state.time 的一种展示方式而已。

这个应该放在render中计算出来：

<span>time: {this.formatTime(this.state.time)}</span>

2，componentWillMount 用来处理render之前的逻辑，不要在render中处理业务逻辑。

render就是一个模板的作用，他只处理和展示相关的逻辑，比如格式化时间这样的，如果有业务逻辑，那么要放在 componentWillMount 中执行。

所以render中一定不会出现改变 state 之类的操作。

3，render返回的是虚拟DOM

所谓虚拟DOM，其实就是 React.DOM.div 之类的实例，他就是一个JS对象。render方法完成之后，真实的DOM并不存在。

4，componentDidMount 中处理和真实DOM相关的逻辑

这时候真实的DOM已经渲染出来，可以通过 this.getDOMNode() 方法来使用了。典型的场景就是可以在这里调用jquery插件。

三更新

当组件实例化完成，就进入了存在期，这时候一般会响应用户操作和父组件的更新来更新视图。

componentWillRecieveProps: 父组件或者通过组件的实例调用 setProps 改变当前组件的 props 时调用。
shouldComponentUpdate: 是否需要更新，慎用
componentWillUpdate: 调用 render方之前
render:
componentDidUpdate: 真实DOM已经完成更新。

四销毁

componentWillUnmount

举例说明组件的生命周期

下面用一个例子来掩饰组件的生命周期

[javascript]view plaincopy 
    
 var NotesList = React.createClass({  
   
 getDefaultProps: function() {  
 console.log("getDefaultProps");  
 return {};  
 },  
   
 getInitialState: function() {  
 console.log("geyInitialState");  
 return {};  
 },  
   
 componentWillMount: function() {  
 console.log("componentWillMount");  
 },  
   
 render: function() {  
 console.log("render");  
 return (  
 <div>hello <strong>{this.props.name}</strong></div>  
 );  
 },  
   
 componentDidMount: function() {  
 console.log("componentDidMount");  
 },  
   
 componentWillRecieveProps: function() {  
 console.log("componentWillRecieveProps");  
 },  
 componentWillUpdate: function() {  
 console.log("componentWillUpdate");  
 },  
 componentDidUpdate: function() {  
 console.log("componentDidUpdate");  
 },  
   
 });  
   
 var list1 = React.render(  
 <NotesList name='aaa'></NotesList>,  
 document.getElementById("div1")  
 );  
   
 var list2 = React.render(  
 <NotesList name='bbb'></NotesList>,  
 document.getElementById("div2")  
 );  