zoukankan      html  css  js  c++  java
  • React 组件的生命周期方法

     React 组件的生命周期方法

    按渲染顺序:

    1: UNSAFE_componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行。

    2: componentDidMount() – 仅在第一次渲染后在客户端执行。

    3: UNSAFE_componentWillReceiveProps()– 当从父类接收到 props 并且在调用另一个渲染器之前调用,父组件初始化的时候不会调用。一个常见的误解是,当props“改变”时,getDerivedStateFromPropscomponentWillReceiveProps才会被调用。事实上,只要父组件重新渲染,这些生命周期函数就会被调用,不管这些props是否与以前“不同”

    3: shouldComponentUpdate() – 根据特定条件返回 true 或 false。如果你希望更新组件,请返回true 否则返回 false。默认情况下,它返回 false。当这个方法返回false的时候,整个组件(类)都不会再执行(渲染)下去,所以最好在不会影响其他组件的组件里使用此方法。shouldComponentUpdate最好作为性能优化使用,而不是为了确保派生状态的正确性

    4: UNSAFE_componentWillUpdate() – 在 DOM 中进行渲染之前调用。

    5: componentDidUpdate() – 在渲染发生后立即调用。

    6: componentWillUnmount() – 从 DOM 卸载组件后调用。用于清理内存空间。

    7:  getDerivedStateFromProps() - 在组件实例化以及接收新props后调用。它可以返回一个对象来更新state,或者返回null来表示新的props不需要任何state更新。 与componentDidUpdate一起,这个新的生命周期应该覆盖传统componentWillReceiveProps的所有用例。

    8: getSnapshotBeforeUpdate() -  在更新之前被调用(例如,在DOM被更新之前)。此生命周期的返回值将作为第三个参数传递给componentDidUpdate。 与componentDidUpdate一起,这个新的生命周期将覆盖旧版componentWillUpdate的所有用例。

    9: componentDidCatch(error, info)如果 render() 函数抛出错误,则会触发该函数。

    10: getDerivedStateFromError(error) - 此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数,并返回一个值以更新 state

  • 相关阅读:
    css的盒子模型由什么组成?
    div盒子水平、垂直居中
    display:none和visibility:hidden的区别
    创建一个多选框,且和文本关联起来(单击文本就像单击该选框一样)
    Canvas和SVG的不同
    js两个页面之间通过URL传参数
    css a标签去除下划线
    css 设置文本垂直居中
    css 边框圆角的方法
    html 文本框css设置边框圆角
  • 原文地址:https://www.cnblogs.com/momozjm/p/11376524.html
Copyright © 2011-2022 走看看