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

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

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

组件生命周期

一 创建类

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

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

举例说明组件的生命周期

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

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")
);

执行这一段代码，实际上做了三件事：

1. 创建了一个类 NodesList
2. 创建了一个对象 list1
3. 创建了一个对象 list2

那么在创建类的时候，输出：

getDefaultProps

在创建list1和 list2的时候都会输出：

geyInitialState

componentWillMount

render

componentDidMount

于是执行这段代码，最终输出的就是：

getDefaultProps

geyInitialState

componentWillMount

render

componentDidMount

geyInitialState

componentWillMount

render

componentDidMount

此时已经存在一个类 NodesList 和 两个对象 list1 & list2

然后我们执行 list1.setProps({name: "ccc”})。那么输出如下：

componentWillUpdate

render

componentDidUpdate

可以发现页面上的 hello aaa 已经变成了 hello ccc