react——生命周期

react——生命周期

函数组件无生命周期，生命周期只有类组件才拥有

---

生命周期函数指在某一时刻组件会自动调用并执行的函数。React每个类组件都包含生命周期方法，以便于在运行过程中特定的阶段执行这些方法。

例如：我们希望在第一次将其呈现到DOM时设置一个计时器Clock。这在React中称为“安装”。我们也想在删除由产生
的DOM时清除该计时器Clock。这在React中称为“卸载”。
一般分为：挂载、更新、卸载

常用的生命周期

不常用的生命周

完整的生命周期图

---

constructor(props)

React组件的构造函数在挂载之前被调用。在实现React.Component构造函数时，需要先在添加其它内容前，调用super(props)，用来将父组件传来的props绑定到继承类中。只调用一次

constructor(props) {
    // 如果你在定义组件中有定义构造函数，则一定要调用super方法来调用父类的构造函数
    super(props)
    // todo …
}

如果你定义的组件中有定义构造函数，则在此构造函数中一定要调用父类中的构造方法构造函数它只执行1次，可以进行数据初始化操作，因为它是所有的生命周期中第1个被执行的方法但是不太建议在此方法中进行网络请求如果你安装了jsx插件，则可以通过 con 按tab完成代码自动补全生成constructor

---

static getDerivedStateFromProps(nextProps, prevState)挂载前

此方法是react16.3之后新增，会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
此方法适用于罕见的用例，即当前组件的 state 的值在任何时候都取决于 props传入。

执行产生副作用函数执行N次此方法它是一个静态方法，静态方法中不能使用this此方法必须要有返回值，​​{}|null​​ , 使用此方法一定要先定义好state，否则报错如果返回为对象，则会对state中数据进行操作，对象属性如果在state中没有则添加，有则修改

如果你想用此方法,把props中的属性数据,追加到state中,后续能修改,则这样的操作,你要确保只执行1次state+props合并后和原state中的数据个数一样,在第1次手动添加一个标识

如果返回为null,则不会对state进行任何操作

参数1：nextProps: 当前最新的props数据
参数2：nextState:当前最新的state数据,暂时不包含你返回值中要对state修改的值
快捷输入 gdsfp

state = {
    num: 0
};

render() {
    return <div>当前的num是{this.state.num}</div>;
}
// 从props中获取数据，绑定到当前的这个组件中的state
// nextProps 父组件传递过来的整个props对象
// prevState 当前组件中的状态对象state
static getDerivedStateFromProps(nextProps,) { 
     // 不需要更新当前state
     return null 
}

---

render()渲染

render()方法是必需的，它主要负责组件的渲染，会被重复调用若干次

---

componentDidMount（）挂载

它会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

它只执行1次虚拟dom挂载到真实的页面点中完成,在此进行dom操作在此可以进行网络请求

componentDidMount() {
    console.log('child -- componentDidMount')
  }

---

getSnapshotBeforeUpdate(prevProps, prevState) 更新时prevProps 修改之前的props数据prevState 修改之前的state数据此方法要有一个返回值,且如果有此方法,则必须要有componentDidUpdate此方法的返回值,会在componentDidUpdate参数3中接受

getSnapshotBeforeUpdate(prevProps,) {
  console.log('child --- getSnapshotBeforeUpdate')
  return 100
}

---

mponentDidUpdate(prevProps, prevState, snapshot)更新完毕

componentDidUpdate(prevProps, prevState,) {
  console.log('child --- getSnapshotBeforeUpdate', snapshot)
}

componentWillUnmount()销毁组件

// 销毁组件时执行
componentWillUnmount(){
  console.log('child --- componentWillUnmount')
}

---

继承PureComponent类组件它可以对于组件无效渲染起到一定的优化,但是它只能针对于props中值为基本类型可以使用生命周期中提供的优化方案,提升无效渲染次数

---

shouldComponentUpdate(nextProps, nextState)优化更新周期钩子函数此方法必须要有一个boolean返回值此方法只有在更新时才会触发true 则继续向下渲染 renderfalse 表示当前不会继续渲染,从而减少无用渲染,提升性能nextProps 最新的props数据this.props 之前的props数据nextState 最新的state数据this.state 之前的state数据只做浅层次的数据比对

shouldComponentUpdate(nextProps,) {
  console.log(this.props, nextProps)
// 针对于要比较的字段进行判断
  if (this.props.num.data === nextProps.num.data) {
    return false
  }
  return true
}

深层次用这个lodash提供的方法
深层比对,它比对的是对象中属性的值,如果全局的值一样则为true,否则为false:​​​_.isEqual(this.props, nextProps)​​

shouldComponentUpdate(nextProps,) {
  return !_.isEqual(this.props, nextProps)
}

当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true则组件继续渲染，为false则当前组件不会渲染。首次渲染或使用 forceUpdate() 时不会调用该方法。此方法仅作为性能优化的方式而存在。你也可以考虑使用内置的 PureComponent 组件，而不是手动编写 shouldComponentUpdate()。PureComponent 会对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。
当this.setState()修改了state中的数据后，当前组件将重新渲染，同时也会重新渲染子组件，但只会渲染当前组件子树（当前组件以其所有子组件）