React生命周期全解和state避坑

所谓的生命周期就是React中定制的一套执行函数的顺序
分为三个阶段，每一个阶段都有不同的函数执行顺序，值得注意的是实例化和销毁阶段执行一次，存在期是可以反复执行的：
1、组件实例化阶段
（在实例化阶段只会执行一次）
 constructor
 componentWillMount
 render
 componentDidMount
2、组件存在阶段
（在组件存在的阶段，每重新渲染一次，都会执行一遍）
 componentWIllReceiveProps
 shouldComponentUpdate（特别注意，如果返回false，则不会执行渲染，也会跳过render前后的钩子函数）
 componnetWillUpdate
 render
 componentDidUpdate（渲染之后，可以通过ref或者findDOMNode，来操作DOM，当React运行在服务端是，不会被调用）
3、组件销毁阶段
 componentWIllUnmount
 React组件的生命周期，已经说忘了，那么我们需要看一下，贯穿整个生命周期的state和props是什么情况。
首先要明白：React的数据流是单向的
props：很好理解，就是向组件本身传递的参数。
 你可以通过props对组件进行状态化处理，可以通过PropTypes(接受一个对象最为参数)进行参数验证

static propTypes={
    data:PropTypes.shape({
        id:PropTypes.string,
        .......
    }).isRequired
}

如果没有传进参数过来怎么办？使用defaultProps设置默认值

static defaultProps={
    name:'No one'
}

注意：
  1、尽量props当作数据源，不要修改数据，作为只读数据，与子组件进行通信（包括数据和事件）
  2、state存储简单的视图状态，在你setstate之后，你是获取不到state的值，state值的改变是在render之后才会改变，如果你要向父组件传递state的数据，那么componentDidMount中传递数据，或者通过setstate（{state:’ss’},()=>{回调函数}）实现，( 原因：setstate本质上是异步的。。。。。。jb)state尽量不要保存计算后的值，state可以接受一个函数，返回值为对象即可

this.setstate((state)=>{
    return {state:'..'}
});

  3、尽量使用setstate来设置state的值，不要直接修改（也可以直接修改，只不过不会引起渲染罢了）
  4、当不需要内部状态，refs和生命周期的方法时，将组件变为函数组件，减少冗余。