react 生命周期 钩子函数（笔记 2）

五.  shouldComponentUpdate(){}  :   每当进行数据更新或页面重新渲染时会触发，当函数返回值为 true 时页面可以更新，当返回值为 false 时页面不会更新而会保持原有状态。

      class App extends React.Component{state ={m:0}shouldComponentUpdate(){console.log("----shouldComponentUpdate");return true;}render(){console.log("----render");return(<div>App :{this.state.m}<button onClick={()=>{this.setState({m:1})}}>更新</button></div>)}}

shouldComponentUpdate(){} 函数可以做性能优化使用，在函数内部判断修改的数据是否跟原数据一致，如不一致则修改，一致则保持原有状态。

        shouldComponentUpdate(nextProps,nextState){console.log("----shouldComponentUpdate");if(this.state.m=== nextState.m)return false;return true;}

六.  componentWillUpdate(){}  :  组件每次更新前调用此钩子函数。

componentWillUpdate(){console.log("----componentWillUpdate");}

由于安全性问题后改名为 UNSAFE_componentWillUpdate(){}

        UNSAFE_componentWillUpdate(){console.log("----UNSAFE_componentWillUpdate");}

 七. componentDidUpdate(){} :  组件每次更新完毕立即执行

        //第一次更新完毕执行componentDidUpdate(){console.log("----componentDidUpdate");}

八. componentWillUnmount(){} :  将要卸载函数，在将要卸载函数组件前调用

        componentWillUnmount(){console.log("----componentWillUnmount");} render(){console.log("----render");return(<div>App :{this.state.m}<button onClick={()=>{ReactDOM.unmountComponentAtNode(document.getElementById('app'))}}>卸载</button></div>)}