React 组件生命周期

constructor()

如果不初始化状态与绑定方法,则不需要为你的组件实现构造函数

通常在 React 构造函数中只用于两个目的:

  • 初始化本地状态,并赋值到this.state
  • 绑定事件处理程序到方法实例

不能在constructor中调用 setState(), 如果你的组件需要用到本地状态, 在构造函数中直接将初始状态赋值到 this.state

避免在构造函数中引入任何副作用或订阅。对于这些用例,使用 componentDidMount()代替。

提示

避免将 props 复制到 state!这是一个常见和错误:

   constructor(props){
     super(props);
     // Don't do this
     this.state = {color: props.color}
   }

这样做完全没有必要(你可以用this.props.color来替代),并且会引起组件创建的缺陷(在color更新时不能及时反应到状态上) 如果你故意想忽略 prop 更新,那么可以采用此模式


static getDerivedStateFromProps()

在调用呈现方法之前,在初始挂载和后续更新中调用该方法。它应该返回一个要更新状态的对象,或者返回 null 不更新任何内容。


render()

该方法是类组件中唯一必需的方法。

当调用时,它会检测this.propsthis.state,并且返回一个以下的类型:

  • React 元素:通常为 JSX
  • 数组或 fragment:让你一次渲染多个节点。详细介绍
  • Portals: 让你在不同的节点渲染子元素。详细介绍
  • 字符串或数字: 渲染文本节点
  • 布尔值或 null: 什么都不渲染

并且具有以下规则

  • 只能通过 this.props 和 this.state 访问数据
  • 只能出现一个顶级组件
  • 不能改变组件的状态
  • 不能修改 DOM 的输出

componentDidMount()

真实的 DOM 被渲染出来后调用,在该方法中可通过 this.getDOMNode()访问到真实的 DOM 元素。此时已可以使用其他类库来操作这个 DOM。

在服务端中,该方法不会被调用。


shouldComponentUpdate()

组件是否应当渲染新的 props 或 state,返回 false 表示跳过后续的生命周期方法,通常不需要使用以避免出现 bug。在出现应用的瓶颈时,可通过该方法进行适当的优化。

在首次渲染期间或者调用了 forceUpdate 方法后,该方法不会被调用


getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate


componentDidUpdate()

完成渲染新的 props 或者 state 后调用,此时可以访问到新的 DOM 元素。


componentWillUnmount()

组件被移除之前被调用,可以用于做一些清理工作,在 componentDidMount 方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。


componentDidCatch()

错误边界是指在子组件树的任何地方捕获 JavaScript 错误的响应组件,记录这些错误,并显示回退的 UI,而不是崩溃的组件树。错误边界在呈现期间、在生命周期方法中以及在它们下面的整个树的构造函数中捕获错误。

如果一个类组件定义了这个生命周期方法,它将成为一个错误边界。在其中调用 setState()可以在下面的树中捕获未处理的 JavaScript 错误并显示回退 UI。仅使用错误边界从意外异常中恢复;不要试图将它们用于控制流。


setState

setState


forceUpdate

forceUpdate


defaultProps

作用于组件类,只调用一次,返回对象用于设置默认的 props,对于引用值,会在实例中共享。


displayName

displayName 字符串用于调试消息。通常,您不需要显式地设置它,因为它是从定义组件的函数或类的名称中推断出来的。如果您希望为调试目的显示不同的名称,或者当您创建高阶组件时,您可能希望显式地设置它,请参阅包装显示名称,以便进行详细的调试。


props

props


state

状态包含特定于此组件的数据,这些数据可能随时间而改变。状态是用户定义的,它应该是一个普通的 JavaScript 对象。

参考