React生命周期详解

React 摒弃了十分消耗性能的手动DOM操作，通过控制组件state和props的改变 利用 diff算法 改变DOM，当DOM需要变动，都会先在虚拟DOM上发生，将实际发生变动的部分渲染在真实的DOM上，这样能极大的提高性能
React 中的组件本质上可以理解为是一个状态机，将状态和输出一一对应，这样可以比较直观的反应程序在不同状态时，对应什么样的输出.

组件的 生命周期 由3个部分组成：初始化阶段，运行中阶段，销毁阶段，每个阶段React都提供了不同的钩子函数供开发者使用

初始化阶段

• getDefaultProps 初始化组件属性的默认值，只调用一次 , 该方法返回一个对象并缓存起来。然后与父组件指定的 props 对象合并，最后赋值给 this.props 作为该组件的默认属性
• getInitialState 初始化每个实例的状态 , 初始化组件的 state 的值。其返回值会赋值给组件的 this.state 属性
• componentWillMount 组件render之前，可以修改状态.如果此时在 componentWillMount 中调用 setState，是不会触发 reRender，而是进行 state 合并
• render 根据 state 的值，生成页面需要的虚拟 DOM 结构，并返回该结构
• componentDidMount 在render完成后 组件渲染到页面时触发 , 对根据虚拟 DOM 结构而生的真实 DOM 进行相应的处理。组件内部可以通过 ReactDOM.findDOMNode(this) 来获取当前组件的节点，然后就可以像 Web 开发中那样操作里面的 DOM 元素了

state属性介绍：
它是用来存储组件自身需要的数据。它是可以改变的，它的每次改变都会引发组件的更新。这也是 ReactJS 中的关键点之一。
即每次数据的更新都是通过修改 state 属性的值，然后 ReactJS 内部会监听 state 属性的变化，一旦发生变化，就会触发组件的 render 方法来更新 DOM 结构。

运行中阶段

• componentWillReceiveProps 当组件接收到新的 props 时，会触发该函数。在改函数中，通常可以调用 this.setState 方法来完成对 state 的修改。如果此时在 componentWillReceiveProps 中调用 setState，是不会触发 reRender，而是进行 state 合并
• shouldComponentUpdate 该方法用来拦截新的 props 或 state，然后根据事先设定好的判断逻辑，做出最后要不要更新组件的决定。
• componentWillUpdate 当上面的方法拦截返回 true 的时候，就可以在该方法中做一些更新之前的操作，进行渲染之前触发 但它不能修改props和state
• render 根据一系列的 diff 算法，生成需要更新的虚拟 DOM 数据。（注意：在 render 中最好只做数据和模板的组合，不应进行 state 等逻辑的修改，这样组件结构更加清晰）
• componentDidUpdate 该方法在组件的更新已经同步到 DOM 中去后触发，我们常在该方法中做一 DOM 操作

注意：此时 this.state 虽然获取到更新数据，但只能在内部源码中使用，我们在开发时，若在 componentWillReceiveProps 中调用 setState，那么在 componentWillReceiveProps、shouldComponentUpdate 和 componentWillUpdate 中还是无法获取到更新后的 this.state，即此时访问的this.state 仍然是未更新的数据，只有在 render 和 componentDidUpdate 中才能获取到更新后的this.state。

---

注意：禁止在 shouldComponentUpdate 和 componentWillUpdate 中调用 setState，会造成循环调用，直至耗光浏览器内存后崩溃。

销毁阶段

• componentWillUnmount 在销毁操作真正执行之前调用，我们通常会做一些取消事件绑定、移除虚拟 DOM 中对应的组件数据结构、销毁一些无效的定时器等工作。这些事情都可以在这个方法中处理。

示例代码

class Clock extends React.Component {  constructor(props) {    super(props);    this.state = {date: new Date()};  }  componentDidMount() {    this.timerID = setInterval(      () => this.tick(),      1000    );  }  componentWillUnmount() {    clearInterval(this.timerID);  }  tick() {    this.setState({      date: new Date()    });  }  render() {    return (      <div>        <h1>Hello, world!</h1>        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>      </div>    );  }}ReactDOM.render(  <Clock />,  document.getElementById('root'));

可以用下面这张图，来详细说明 React 组件生命周期中钩子函数 的触发顺序

初始化简单的实例

var MyFirstComponent = React.createClass({  // 只调用一次，实例之间共享引用  getDefaultProps: function () {    // 下面的console.log()是在实例化组件时就被调用    console.log('getDefaultProps, 1');     return {name: 'Tom'};  },  // 初始化每个实例特有的状态  getInitialState: function () {    console.log('getInitialState, 2');    return {ready: false};  },  // render之前最后一次修改状态的机会  componentWillMount: function () {    console.log('componentWillMount, 3');    this.setState({ready: true});  },  // 只能访问this.props和this.state，只有一个顶层组件，不可以修改状态和DOM输出  render: function () {    console.log('render, 4');    return (      <p ref="textNode">        Hello, {this.props.name ? this.props.name : 'World'}        <br/>        {'' + this.state.ready}      </p>    )  },  // 成功render并渲染完成真实DOM之后触发，可以修改DOM  componentDidMount: function () {    console.log('componentDidMount, 5');  }});ReactDOM.render(  <MyFirstComponent />,  document.getElementById('example'));

控制台显示的结果如下，可以很直观的看到各个函数的执行顺序

运行简单例子

var ChildComponent = React.createClass({  // 组件将要接受到属性时触发  componentWillReceiveProps: function () {    console.log('componentWillReceiveProps 1');  },  // 组件是否需要更新，返回false则阻止render调用  // 这个函数我们一般谨慎使用，只有在性能调优时会使用  shouldComponentUpdate: function () {    console.log('shouldComponentUpdate 2');    return true;  },  // 组件接收到新的props或者state后，进行渲染之前触发  // 但它不能修改props和state  componentWillUpdate: function () {    console.log('componentWillUpdate 3');  },  render: function () {    console.log('render, 4');    return (      <p ref="myText">        Hello, {this.props.name ? this.props.name : 'World'}      </p>    )  },  // 在render完成后 组件完成更新渲染到页面时触发  componentDidUpdate: function () {    console.log('componentDidUpdate 5');    // 为了演示方便，这里使用了jQuery，需要在HTML中先加载jQuery库    $(this.refs.myText).append("\nI'm here!");  }});var ParentComponent = React.createClass({  // 初始化状态  getInitialState: function () {    return {name: ''}  },  handleChange: function (event) {    this.setState({name: event.target.value});  },  render: function () {    return (      <div>        <ChildComponent name={this.state.name} />        <input className="form-control" type="text" onChange={this.handleChange} />      </div>    );  }});ReactDOM.render(  <ParentComponent />,  document.getElementById('example'));

参考资料（https://facebook.github.io/react/docs/react-component.html）