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>
          
          )
        }