React 旧版生命周期

  • Z时代
  • 2024-01-10
  • 分类：综合

react

生命周期

生命周期：组件从诞生到销毁会经历一系列的过程，该过程就叫做生命周期。React在组件的生命周期中提供了一系列的钩子函数（类似于事件），可以让开发者在函数中注入代码，这些代码会在适当的时候运行。

生命周期仅存在于类组件中，函数组件每次调用都是重新运行函数，旧的组件即刻被销毁

1. 旧版生命周期

React < 16.0.0

  1. constructor

    1. 同一个组件对象只会创建一次

    2. 不能在第一次挂载到页面之前，调用setState，为了避免问题，构造函数中严禁使用setState

  2. componentWillMount

    1. 正常情况下，和构造函数一样，它只会运行一次

    2. 可以使用setState，但是为了避免bug，不允许使用，因为在某些特殊情况下，该函数可能被调用多次（可能会遇到这种情况，在还没挂载之前，生命周期可能会打断，那么componentWillMount 将会在次的调用，也有可能是服务端的渲染ssr，服务端运行一次，客户端也会运行一次）

  3. render

    1. 返回一个虚拟DOM，会被挂载到虚拟DOM树中，最终渲染到页面的真实DOM中

    2. render可能不只运行一次，只要需要重新渲染，就会重新运行

    3. 严禁使用setState，因为可能会导致无限递归渲染

  4. componentDidMount

    1. 只会执行一次

    2. 可以使用setState

    3. 通常情况下，会将网络请求、启动计时器等一开始需要的操作，书写到该函数中

  5. 组件进入活跃状态

  6. componentWillReceiveProps

    1. 即将接收新的属性值

    2. 参数为新的属性对象

    3. 该函数可能会导致一些bug，所以不推荐使用

  7. shouldComponentUpdate

    1. 指示React是否要重新渲染该组件，通过返回true和false来指定

    2. 默认情况下，会直接返回true

  8. componentWillUpdate

    1. 组件即将被重新渲染

  9. componentDidUpdate

    1. 往往在该函数中使用dom操作，改变元素

  10. componentWillUnmount

    1. 通常在该函数中销毁一些组件依赖的资源，比如计时器

以上是 React 旧版生命周期 的全部内容， 来源链接： utcz.com/z/383597.html

回到顶部