react组件什么周期记录，转的

react 的核心除了虚拟DOM,我想还有一个很重要的就是生命周期函数，理解生命周期函数，对写出合理的commponet很有帮助。下面总结一下我对生命周期函数的一些理解已经在项目过程中遇到的一些问题。

先上一张图：

    

1、getIntialState()方法

    这个方法在组件没有mouting之前调用，在这个方法中可以初始化一些数据，例如state。这个方法在组件创建的时候调用一次，之后就不会再被调用了，除非组件销毁，重新创建。

    在这个方法中已经可以访问到this.props了。

 

2、componentWillMount()方法

    这个方法在组件已经即将创建但是还没有创建的时候调用，在这里可以用setState修改state。但是react建议是在组件mouted以后调用setState函数，否则容易报警告。这点在介绍state的时候在详细分析。

 

3、render方法

    这个方法是react组件唯一必需的函数，这个方法用于创建虚拟DOM。

    这个方法里数据只能通过this.state和this.props输出。

    要注意一点返回的组件必须有一个顶级的组件，也就是说所有的标签必须被一个父标签包裹。

 

4、componentDidMount()方法  

     这个方法中可以调用Rect.findDOMNode()方法，访问Dom节点（注：在react 0.13版本中用this.getDOMNode()方法而且返回的是虚拟DOM，不能直接访问DOM节点）

    访问DOM节点时，react 提供了refs对象，可以同个refs对象直接访问到相应的节点上：

    例如：

    <div ref='app'></div>

    可以通过Rect.findDOMNode(this.refs.app)直接访问到div节点

 

5、componentWillReciveProps(object nextProps)方法

    这个方法可以接受到this.props的更新，所以可以在这个方法中,可以更新组件。但是在这个方法中使用setState函数是不会触发render()方法的。

    这个方法在使用react-router时，可以实现类似于从路由/feed/123 to /feed/789的组件数据更新。

  ps:方法在组件intial的时候不会被调用

‍

6、shouldComponentUpdate()方法

    这个方法可以用来精准判断是否更新组件，你可以通过判断this.prop和this.state是否需要渲染更新，来返回false或者true。如果返回的是false则react会跳过render方法,以及render方法的前后两个方法。所以使用这个方法是要谨慎，容易导致整个页面无法渲染。

7、componentWillUpdate()方法

    组件在接受到新的this.props或者this.state前调用该方法。在这个方法中不能调用setState方法更新state或者更新this.props。

8、componentDidUpdate()方法

    该方法可以更新已经渲染好的DOM结构

 

9、componentWillUnmount()方法

    这个方法主要用来做一些垃圾回收的工作，但是由于浏览器的垃圾自动回收机制，所以基本上不需要使用这个方法。

10、mixin

   在创建组件的过程中有很多方法是在多个组件中共用，如果在每个组件中都重复定义一遍，太麻烦，这个时候可以使用mixin。mixin允许我们重复定义生命周期函数。mixin中的生命周期函数会先于组件自己的生命周期函数调用。