react生命周期

componentDidMount() 组件生成 可修改DOM

componentDidMount(){
        console.log("第一次did mount",document.getElementById("myname"))
        // 数据请求axios
        // 订阅函数调用
        // setInterval
        // 基于创建的完的dom进行 初始化，，，，，，BetterScroll
    }

componentDidUpdate(prevProps,prevState){}组件更新

每次组件更新后都会执行 （）中2个参数分别为修改前的props和state值

使用setstate时需要包裹在一个判断语句中不然会重复执行（报错）

componentDidUpdate(prevProps,prevState){
    if(JSON.stringify(prevState)===JSON.stringify(this.state)){
          this.setState({
            i:2
          })
    }
        }

shouldComponentUpdate(nextprops,nextstate){}是否更新组件

false为不更新 true为更新(默认)

shouldComponentUpdate(nextprops,nextstate){ nextprops更新后的props值,nextstate更新后的state值
        将新旧state转换为字符串进行对比  也适用于props对比
        if(JSON.stringify(nextstate)!=JSON.stringify(this.state)){
            return true
        }
        return false
    }

PureComponent   自动和下次的值进行对比 

import { PureComponent } from 'react'
 class App extends PureComponent {
  state={
    count:1
  }
  render() {
    return (
      <div>
        {this.state.count}
        <button onClick={()=>{this.setState({count:2})}}>11</button>
      </div>
    )
  }

componentWillUnmount  组件被卸载时

父组件通过三目运算符来实现子组件的卸载

        <button onClick={()=>{this.setState({i:0})}}>111</button>
        {this.state.i?<Child/>:''}

子组件

为子组件中的timer挂载一个定时器
componentDidMount(){
   this.timer= setInterval(()=>{
      console.log(2);
    },2000)
当组件被卸载时  执行componentWillUnmount将计时器清除
componentWillUnmount(){
    clearInterval(this.timer)
  }

getDerivedStateFromProps  用于将props转换为state

页面创建时会执行一次 之后每次刷新都会执行

return返回的值会与state中的值进行合并  属性名一样会覆盖，没有的则会创建

父组件   
 state={
    mytext:'hello'
  }    
 <Child mytext={{mytext:this.state.mytext,myname:'zs'}}></Child>
子组件
state={
    mytext:''
  }
static getDerivedStateFromProps(nextprops,nextstate){
          return{
            mytext:nextprops.mytext.mytext,
            myname: nextprops.mytext.myname           
          }
  }

getSnapshotBeforeUpdate（）{}  方法在最近一次渲染输出（提交到 DOM 节点）之前调用。

在render之后  componentDidUpdate之前执行 

必须有return 值  return 的值可作为componentDidUpdate（）的第三个值使用

  getSnapshotBeforeUpdate(){
    return 123
  }
  componentDidUpdate(prevprops,prevstate,val){
    console.log(val);
  }