美文网首页
react生命周期详解

react生命周期详解

作者: 景元合 | 来源:发表于2019-08-21 16:22 被阅读0次

    概述

    今天学习react时候,借编写这篇文章加深一下对react周期加深印象


    5287253-bd799f87556b5ecc副本.png

    Initialization阶段

    constructor()

    constructor方法在组件建立前被调用。
      1、在这个方法里面,应该先调用super(props),否则this.props就会未定义。
      2、这个方法的主要用途是,初始化props,state和绑定方法。
    在 constructor() 函数中不要调用 setState() 方法。如果你的组件需要使用内部 state,请直接在构造函数中为 this.state 赋值初始 state:

    constructor(props) {
      super(props);
      // 不要在这里调用 this.setState()
      this.state = { counter: 0 };
      this.handleClick = this.handleClick.bind(this);
    }
    

    Mounting阶段

    componentWillMount()

    这个方法在render方法执行前渲染,componentWillMount() 在挂载之前被调用。它在 render() 之前调用,因此在此方法中同步调用 setState() 不会触发额外渲染。通常,我们建议使用 constructor() 来初始化 state。
    避免在此方法中引入任何副作用或订阅。如遇此种情况,请改用 componentDidMount()。
    此方法是服务端渲染唯一会调用的生命周期函数。
    此方法即将过时,项目中避免使用。

    render()

    当调用render的时候,组件会检查props和state并返回下列类型中的一个:

    • react元素。
    • 字符串或者数字。
    • Portals。
    • null。(不渲染)
    • Booleans。(不渲染)
    • react.Fragment。

    componentDidMount()

    componentDidMount() 会在组件挂载后(插入 DOM 树中)立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据,此处是实例化请求的好地方。
    这个方法是比较适合添加订阅的地方。如果添加了订阅,请不要忘记在 componentWillUnmount() 里取消订阅

    你可以在 componentDidMount() 里可以直接调用 setState()。它将触发额外渲染,但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 render() 两次调用的情况下,用户也不会看到中间状态。请谨慎使用该模式,因为它会导致性能问题。通常,你应该在 constructor() 中初始化 state。

    Updation阶段

    shouldComponentUpdate()

    shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true,返回 false,则不会调用componentWillUpdate(),render(),React 可能会将 shouldComponentUpdate 视为提示而不是严格的指令,并且,当返回 false 时,仍可能导致组件重新渲染。
    此方法,大部分情况下组件可能都不需要它,仅作为性能优化的方式而存在,例如阻止子组件每次都渲染。

    UNSAFE_componentWillUpdate()

    此生命周期之前名为 componentWillUpdate,当组件收到新的 props 或 state 时,会在渲染之前调用 UNSAFE_componentWillUpdate()。使用此作为在更新发生之前执行准备更新的机会。初始渲染不会调用此方法.
    此方法即将过时,项目中避免使用。

    componentDidUpdate()

    componentDidUpdate(prevProps, prevState, snapshot)
    

    componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
    当组件更新后,可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较,也可以选择在此处进行网络请求。(例如,当 props 未发生变化时,则不会执行网络请求)。

    componentDidUpdate(prevProps) {
      // 典型用法(不要忘记比较 props):
      if (this.props.userID !== prevProps.userID) {
        this.fetchData(this.props.userID);
      }
    }
    

    你也可以在 componentDidUpdate() 中直接调用 setState(),但请注意它必须被包裹在一个条件语件里,正如上述的例子那样进行处理,否则会导致死循环。

    Unmounting

    componentWillUnmount()

    componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如,清除 timer,取消网络请求或清除在 componentDidMount() 中创建的订阅等。

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

    总结

    简单记录一下react的生命周期,有些过时的就没做太多介绍,其实官网介绍的还是很清晰的,大家可以参考官网熟悉生命周期。

    相关文章

      网友评论

          本文标题:react生命周期详解

          本文链接:https://www.haomeiwen.com/subject/oxemsctx.html