React生命周期

React的生命周期主要分为三部分：实例期(挂载)、存在期(更新)、销毁期(卸载)

一、实例期

constructor（props）数据的初始化。

        通过给this.state赋值对象来初始化内部state，state里面的值是只读的，直接修改可能会报错，如需修改可以用setState（），构造函数是唯一可以给this.state赋值的地方。

class Hhh extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  //state = {};  也可以省略constructor(props){super(props);}直接初始化state

  onClick = () => {};
  render() {
    return <div>hhhhhhhhhhhh</div>;
  }
}
                                         

render  创建虚拟dom 主要用于页面渲染 必须调用

        render函数会插入jsx生成的dom结构，生成一份虚拟dom树，每次有更新时都会调用并重新渲染

render(){
    console.log('页面渲染');
    return (
      <div>渲染页面</div>
    )
}

componentDidMount   真实dom 组件挂载完成  常用

        组件挂载完后，会被立即调用。一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息、存储sessionStorage等。

  componentDidMount() {
    // console.log("组件挂载完成 拿到元素 数据等");
    this.timer = setTimeout(() => {
      clearTimeout(this.timer);
      this.onClick();
    }, 1000);
  }

二、存在期

getDerivedStateFromProps()

        替代了旧的生命周期componentWillReceiveProps()，在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。必须有返回值，它应返回一个对象来更新 state，如果返回null则不更新任何内容。比较少见，即 state 的值在任何时候都取决于 props。           static getDerivedStateFromProps()是一个静态函数，也就是说这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断，根据新传入的props来映射到state。 

static getDerivedStateFromProps(nextProps, prevState) {
    const {type} = nextProps;
    // 当传入的type发生变化的时候，更新state
    if (type !== prevState.type) {
        return {
            type,
        };
    }
    // 否则，对于state不进行任何操作
    return null;
}

shouldComponentUpdate()

        该函数主要用于优化性能。防止render进行多次渲染，消耗性能。

        在子组件和父组件中都有效，当组件中props 或 state 任意一个值发生变化都会执行，返回的结果可以决定组件是否更新

可以理解为 相当于一个页面更新的“阀门”，如果return false 则 除了forceUpdate() 以外，任何操作都不能更新页面）

shouldComponentUpdate(nextProps,nextState){
    if(nextProps.num / 2 === 0){
        return true  // 可更新
    }
     return false    // 不可更新
}

getSnapshotBeforeUpdate（）

        在最后一次渲染（提交到dom节点）之前调用，替换了旧的生命周期componetnWillUpdate

        它能在组件更改之前获取dom的节点信息（滚动位置），该方法所有返回值都会作为参数传给componentDidUpdate，此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。应返回 snapshot 的值（或 null）。

componentDidUpdate()  组件挂载完成          

        更新完成后调用，首次渲染不会执行此方法。之后每次重新渲染都会被调用。

注意：如果在componentDidUpdate()中使用this.setState()必须包裹在条件语句中，避免进入死循环。 

componentDidUpdate(prevProps, prevState, snapshot) {
  // 典型用法（不要忘记比较 props）：
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

       prveProps,prveState 改变之前的值(旧值)，如果组件实现了 getSnapshotBeforeUpdate（）生命周期（不常用），则它的返回值将作为componentDidUpdata() 的第三个参数 “snapshot” 参数传递。否则此参数将为 undefined。如果返回false就不会调用这个函数。

注意：如果shouldComponentUpdate() 返回值为 false，则不会调用 componentDidUpdate()。

三、销毁期

componentWillUnmount()  组件即将卸载  常用

          组件卸载及销毁之前直接调用，在此方法中主要进行清理工作，比如清除timer、取消订阅者模式（如果在componentDidMount（）发布了订阅模式）、清除sessionStorage存储等

componentWillUnmount(){
    console.log('组件即将卸载')
 
    // 组件卸载时清空该子组件里的点击事件
    this.box.onclick = null
 
    // 组件卸载时清空该组件里的定时器
    clearInterval(this.timer)
}

补充下经常用到的API 

setState()  常用

        使用方法：this.setState({ 修改的数据 })

        setState()可以有一个或两个参数  setState(obj，callback)

第一个参数： 当 obj 为一个对象的时候，则为即将合并的 state，如果 obj 是一个函数，那么当前组件的 state 和 props 将作为参数，返回值用于 合并新的 state。

第二个参数：当 callback 为一个函数，函数执行上下文中可以获取当前 setState 更新后的最新 state 的值，可以作为以来 state 变化的副作用函数，可以 用来做一些基本的 DOM 操作等。

// 第一个参数为function类型的时候
this.setState((state, props) => {
    return { number: 1 }
})

this.setState((state, props) => {
    return { number: 1 }
},() => {
    console.log(this.state.number) 
})

 
// 第一个参数为object类型的时候
this.setState({ number: 1 })

this.setState({ number: 1 }, () => {
    console.log(this.state.number) // 获取最新的number，这个回调函数会在状态更新后立即执行
})

        setState()它本身的执行过程和代码是同步的，只是它在合并数据与钩子函数的调用顺序在更新后无法拿到值，形成了 异步 ，我们可以通过第二个参数拿到更新后的结果。

changeText() {
  this.setState({
    age: 20
  }, () => {
    console.log(this.state.age); // 文本已经立马被改变了,得到的是20
  });
}

forceUpdate()

默认情况下，当组件的 state 或 props 发生变化时，组件将重新渲染。如果render()方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。

可以结合官网参考~

react官网生命周期React.Component – React

react官网更多APIReact.Component – React