React essence note - 2 - 为什么 React 16 要更改组件的生命周期？（上）

为什么 React 16 要更改组件的生命周期？（上）

render

• render是React组件的灵魂
• render之外的生命周期方法可以理解为组件的躯干
• ReactDOM.render()和render()不是一个概念. render指的是从组件数据改变到组件实际更新发生的过程

React15 生命周期

• 1. constructor()
• 2. componentWillReceiveProps()
• 3. shouldComponentUpdate()
• 4. componentWillMount()
• 5. componentWillUpdate()
• 6. componentDidUpdate()
• 7. componentDidMount()
• 8. render()
• 9. componentWillUnmount

生命周期 - Mounting 挂载阶段

• 1. constructor() => 该方法仅仅在挂载的时候被调用一次. 初始化 this.state
• 2. componentWillMount() => 仅仅在挂载的时候被调用一次.
• 3. render() => 它的职能仅仅是把需要渲染的内容返回出来。 真实的DOM渲染操作,在挂载阶段由ReactDOM.render来承接
• 4. componentDidMount() => 仅仅在挂载的时候被调用一次.(真实DOM已经挂载到页面了,我们可以在这个生命周期做真实的DOM操作, 异步请求,数据初始化也可以放在这个生命周期来做.)

生命周期 - Updating 更新阶段

• 组件的更新分为两种: 一种是由父组件更新触发的更新; 另一种是组件自身调用自己的setState触发的更新. 这两种更新对应的生命周期流程如下:

• componentWillReceiveProps(nextProps) 父组件触发的更新和组件自身的更新相比, 多了这个生命周期方法, nextProps表示接收到的新的props内容
• componentWillReceiveProps是组件在props内容发生了变化时被触发的. 这种说法不够严谨
• React官方: 如果父组件导致组件重新渲染,即使 props 没有更改, 也会调用 componentReceiveProps生命周期函数, 如果指向处理更改,请确保进行当前值与变更至的比较.
• 所以 componentReceiveProps 并不是由 props 的变化触发的,而是由父组件的更新触发的.
• componentWillUpdate 和 componentDidUpdate: componentWillUpdate会在render前触发,它和componentWillMount类似, 允许在里面做一些不涉及真实DOM操作的准备工作. 而componentDidUpdate则在组件更新完毕后被触发, 和 componentDidMount类似, 这个生命周期函数也经常被用来处理DOM操作. 此外, 我们也常常将componentDidUpdate的执行作为子组件更新完毕的标志通知到父组件

render 和 性能

• shouldComponentUpdate React 组件会根据 shouldComponentUpdate 的返回值，来决定是否执行该方法之后的生命周期，进而决定是否对组件进行 re-render（重渲染）。shouldComponentUpdate 的默认值为 true，也就是说“无条件 re-render”。

    shouldComponentUpdate(nextProps,nextState){ }

生命周期 - Unmounting 卸载阶段

• 执行一个生命周期方法被触发 componentWillUnmount()