|
? ? ? ? React生命周期（旧）在我看来可以大体分为两个部分，其一组件挂载或者卸载的过程，其二数据更新的过程。而在生命周期中一直穿插着一个很重要的问题:setState! setState不仅仅的问题不仅仅是他怎么起作用的 在什么时候起作用，还有就是他的同异步问题。
? ? ? ? 在组件的挂载和过程中共执行了一下几个钩子。
1. getDefaultProps
2. getInitalState
3.componentWillMount
4.render
5. componentDidMount?
? ? ? ? 1与2是在初始化props与state componentWillMount?和 componentDidMount 则是在渲染的前后时刻。在前面组件挂载的阶段可执行setState的阶段有componentWillMount 与componentDidMount，但是在?componentWillMount中使用setState在我看来是没必要的也是不规范的，如果在这里调用setState,会有两种可能的情况其一：继续按照顺序跑下去，执行render 和 componentDidMount，在执行完毕后在向下进行。其二是直接进入setState的执行顺序，走shouldComponentUpdate与之后的流程，但是又因为setState是异步的，也得等待主线程执行完毕后也就是在componentDidMount执行完毕之后进行所以这两者的虽然调用的时机不同但是单从结果上来说是一样的，所以应该采取更加规范的在componentDidMount中或后调用setState。
? ? ? ? 在数据更新过程中，会有如下的生命周期钩子执行顺序?
1. componentWillReceiveProps(nextProps)
2. shouldComponentUpdate(nextProps, nextState)
3. componentWillUpdate(nextProps, nextState)
4. render()
5. componentDidUpdate
? ? ? ? 当代码中数据发生了更新调用了setState会进行一个判断，如果是通过props驱动的数据更新则会从componentWillReceiveProps(nextProps)开始走，接着按下面的顺序执行，如果是由state驱动的数据更新则会直接从shouldComponentUpdate开始走，到这里首先会做一个判断如果为true才会继续向下走，执行页面的再次渲染等，在componentDidUpdate钩子中也可以调用setState，调用后是从shouldComponentUpdate开始向下执行。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
|