详解React生命周期

yanshi
202 阅读3分钟

梳理一下React的生命周期 React的生命周期指的是一个组件从挂载、更新到结束，在不同周期阶段会执行不同的API，接下来就开始梳理一下周期执行的API

挂载

  • constructor
  • static getDerivedStateFromProps
  • render
  • componentDidMount

旧方法

UNSAFE_componentWillMount()

更新

  • static getDerivedStateFromProps
  • componentShouldUpdate
  • render
  • getSnapshotBeforeUpdate
  • componentDidUpdate

旧方法

UNSAFE_componentWillUpdate() UNSAFE_componentWillReceiveProps()

销毁

  • componentWillUnMout

constructor()

构造方法，主要作用在初始化的时候注入state的初始值，以及绑定事件实例 在为React.Component子类实现构造函数时，super(props)应该在任何其他语句之前调用。

eg:

 constructor(props: TypeApp) {
   super(props);// 这里需要提前执行，后面才可以调用this.porps,否则会因为为声明而报错
   this.state = {
     age: "18",
     name: this.props.name
   };
 }

static getDerivedStateFromProps(nextProps,state)

static表示的是静态方法在ES6中表示，该方法不会被实例继承，而是直接通过类来调用

  • 参数
    • nextProps是下一轮需要更新的状态
    • state是上一轮更新的状态

通过props获取state的派生状态

  • getDerivedStateFromProps在调用 render 方法之前被调用，包括初始挂载和后续更新。返回一个对象来更新状态，返回null则不更新。
  • getDerivedStateFromProps的存在是为了使组件能够根据props 的变化更新其内部状态。
  • 此方法无权访问组件实例

上文提到的派生状态，何为派生状态 派生状态指的一个组件的state中的某个数据来自外部，则这个state中的数据称之为派生状态

render()

render方法是类组件中唯一必须实现的 该方法用来输出展示页面元素，如果返回布尔值false，null，undefined页面则不展示内容

componentDidMount()

componentDidMount在组件插入DOM树之后立即执行，在componentDidMount方法里可以执行异步网络请求、事件监听。也可以调用setState()，更新内部状态

shouldComponentUpdate(newProps, newState)

  • 参数

    • nextProps：即将更新的props值
    • nextState：即将更新的state的值

  • shouldComponentUpdate 在组件更新之前调用，可以依据返回的布尔值来决定，是否进行更新，默认为true,返回false则不更新。

  • 依据参数newProps、newState和一些其他条件进行逻辑对比，然后返回布尔值，来决定是否需要更新，进行一定的性能优化

  • 用来在做性能优化的时候使用，不能过度依赖返回的结果来影响渲染

  • 考虑使用内置PureComponent来代替shouldComponentUpdate

  • 不推荐进行深度的相等性检查，或者使用JSON.stringify()，这个操作低效且损害性能

getSnapshotBeforeUpdate(prevProps, prevState)

  • 参数

    • prevProps：上一次的props

    • prevState：上一次的state

      处于“Pre-commit phase” 阶段此时能够访问到DOM getSnapshotBeforeUpdate() 在最近一次的渲染输出被提交之前调用。也就是说，在 render 之后，即将对组件进行挂载时调用。 它使组件能够在可能发生更改之前从 DOM 捕获一些信息（例如滚动位置）。此生命周期方法返回的任何值都将作为参数传递给componentDidUpdate().

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行

  • 参数
    • prevProps：上一次的props
    • prevState：上一次的state
    • snapshot：getSnapshotBeforeUpdate执行的“snapshot”，如果未实现getSnapshotBeforeUpdate(),这个值为null 可以依据前后props进行比较，来进行setState,同时比较中需要依赖前后的props，否则会导致异常

componentWillUnmount()

componentWillUnmount()在卸载和销毁组件之前立即调用。 在方法中可以执行一些定时器，监听方法的清理，或者清理在componentDidMount()中的订阅 在componentWillUnmount()不要调用setState，调用了也不会生效，因为组件的不会重新渲染

附上React官方的React生命周期图 生命周期

avatar
文章
阅读
粉丝