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

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

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

组件生命周期

一 创建类

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

[javascript] view plain copy

1. varList=React.createClass({
2. render:function(){}
3. });

这里的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

举例说明组件的生命周期

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

copy

varNotesList=React.createClass({
2. getDefaultProps:function(){
3. console.log("getDefaultProps");
4. return{};
5. },
7. getInitialState:function(){
8. console.log("geyInitialState");
9. return{};
10. },
11. componentWillMount: console.log("componentWillMount");
12. render: console.log("render");
13. return(
14. <div>hello<strong>{this.props.name}</strong></div>
15. );
16. componentDidMount: console.log("componentDidMount");
17. componentWillRecieveProps: console.log("componentWillRecieveProps");
18. componentWillUpdate: console.log("componentWillUpdate");
19. componentDidUpdate: console.log("componentDidUpdate");
20. });
21. varlist1=React.render(
22. <NotesListname='aaa'></NotesList>,
23. document.getElementById("div1")
24. varlist2=React.render(
25. <NotesListname='bbb'></NotesList>,
26. document.getElementById("div2")
27. );