首页 > 其他 > 详细

React 生命周期(Lifecycle)

时间:2020-04-18 17:32:42      阅读:42      评论:0      收藏:0      [点我收藏+]
  • 本文将对 React 的16.4版本中,生命周期中的三大阶段:挂载、更新、卸载的执行场景和使用的使用场景进行简要的概述,更多关于 React 生命周期的最新使用,请查看官网

  • 挂载阶段: 当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下:

    1. constructor()

      • 执行场景

        • 在 React 组件挂载之前,会调用它的构造函数。只会执行一次

      • 使用场景

        • 通过给 this.state 赋值对象来初始化组件内部的 state,或为事件处理函数绑定实例

      • 注意事项

        • 在为 React.Component 子类实现构造函数时,应在其他语句之前前调用 super(props)。否则,this.props 在构造函数中可能会出现未定义的 bug。

        • constructor() 函数中不要调用 setState() 方法。如果你的组件需要使用内部 state,则直接在构造函数中为 this.state 赋值初始 state

    2. static getDerivedStateFromProps()

      • 执行场景

        • 初始化阶段执行在 constructor() 方法之后,在 render() 方法之前调用,并且在后续更新时都会被调用。

      • 使用场景

        • 从属性里面获取派生状态,在函数的挂载阶段和更新阶段都会执行

      • 注意事项

        • static getDerivedStateFromProps(props,state) 的 state 的值在任何时候都取决于 props

        • 它应返回一个对象来更新 state,如果返回 null 则不更新任何内容。

    3. render()

      • 执行场景

        • 初始化阶段执行在 constructor() 方法之后,并且在后续更新时都会被调用。

      • 使用场景

        • render() 方法是 class 组件中唯一必须实现的方法。

        • 遵循 JSX 语法糖

      • 注意事项

        • render 被调用时,当返回 布尔类型或 nullundefined,什么都不渲染。

    4. componentDidMount()

      • 执行场景

        • 在render()方法之后,只能执行一次

      • 使用场景

        • componentDidMount() 会在组件挂载后(插入 DOM 树中)立即调用。

        • 可以在 componentDidMount()直接调用 setState()

        • 发起 ajax 请求,实例化第三方插件、初始化定时器的绑定

  • 更新阶段: 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下:

    1. static getDerivedStateFromProps()

      • 执行场景

        • 当 props 或 state 发生变化时,会在调用 render 方法之前调用。

      • 使用场景

        • 从属性里面获取派生状态,在函数的挂载阶段和更新阶段都会执行

      • 注意事项

        • static getDerivedStateFromProps(props,state) 的 state 的值在任何时候都取决于 props

        • 它应返回一个对象来更新 state,如果返回 null 则不更新任何内容。

    2. shouldComponentUpdate()

      • 执行场景

        • 当 props 或 state 发生变化时,shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。

      • 使用场景

        • 根据 shouldComponentUpdate(nextProps,nextState) 的返回值,判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。

      • 注意事项事项

        • shouldComponentUpdate() 方法仅作为性能优化的方式(优化 react 的 render 的渲染次数)而存在,或考虑使用内置的 PureComponent 组件

        • 针对无状态组件,则使用 React.memo(组件) 来进行性能提升

        • 首次渲染或使用 forceUpdate() 时不会调用该方法。

        • 这个方法如果返回 false,那么 props 或 state 发生改变的时候会阻止子组件发生重新渲染

        • 如果 shouldComponentUpdate(nextProps, nextState) 返回 false,则不会调用 UNSAFE_componentWillUpdate(nextProps, nextState)render()componentDidUpdate()

    3. render()

      • 执行场景

        • 当 props 或 state 发生变化时

      • 使用场景

        • 当 props 或 state 发生变化时

      • 注意事项

        • render 被调用时,它会检查 this.propsthis.state 的变化并返回。

    4. getSnapshotBeforeUpdate()

      • 执行场景

        • 当 props 或 state 发生变化后

      • 使用场景

        • 该方法不会再组件初始化时触发,使用这个方法可以对组件中的DOM进行操作

        • getSnapshotBeforeUpdate(prevProps, prevState, snapshot) 的任何返回值将作为参数传递给 componentDidUpdate(),应返回 snapshot 的值(或 null)。

      • 注意事项

        • 如果 shouldComponentUpdate(nextProps, nextState) 返回false, 那么 componentDidUpdate(prevProps, prevState) 不会被触发

        • 该方法不能调用 this.setState({})

    5. componentDidUpdate()

      • 执行场景

        • 在 render() 方法之后

      • 使用场景

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

      • 注意事项

        • 如果组件实现了 getSnapshotBeforeUpdate() 生命周期,则它的返回值将作为 componentDidUpdate() 的第三个参数 “snapshot” 参数传递。否则此参数将为 undefined。

        • 如果 shouldComponentUpdate() 返回值为 false,则不会调用 componentDidUpdate()

        • 当 ajax 请求的数据改变引发的真实dom结构已经挂载完毕了,可以通过使用 componentDidUpdate() 实例化第三方插件

  • 卸载阶段 当组件从 DOM 中移除时会调用如下方法:

    1. componentWillUnmount()

      • 执行场景

        • 把组件从 dom 中移除的时候

      • 使用场景

        • componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如,清除定时器,取消 ajax,卸载实例化第三方的一些插件

      • 注意事项

        • 通过引入 react-dom,当 ReactDOM.unmountComponentAtNode() 调用的时候,就执行 componentWillUnmount()

        • componentWillUnmount()不应调用 setState(),因为该组件将永远不会重新渲染。组件实例卸载后,将永远不会再挂载它。

React 生命周期(Lifecycle)

原文:https://www.cnblogs.com/Welin/p/12726728.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!