Skip to main content

React Components 生命周期

· 3 min read
VisualDust

在 React.Component 的子类中有个必须定义的 render() 函数。render() 方法是 class 组件中唯一必须实现的方法。当 render 被调用时,它会检查 this.props 和 this.state 的变化并返回以下类型之一:

  • React 元素。通常通过 JSX 创建。例如,<div /> 会被 React 渲染为 DOM 节点,<MyComponent /> 会被 React 渲染为自定义组件,无论是 <div /> 还是 <MyComponent /> 均为 React 元素。
  • 数组或 fragments。 使得 render 方法可以返回多个元素。
  • Portals。可以渲染子节点到不同的 DOM 子树中。
  • 字符串或数值类型。它们在 DOM 中会被渲染为文本节点
  • 布尔类型或 null。什么都不渲染。(主要用于支持返回 b && <Child /> 的模式,其中 b 为布尔类型。)

render() 函数应该为纯函数,这意味着在不修改组件 state 的情况下,每次调用时都返回相同的结果,并且它不会直接与浏览器交互。

warning

如果 shouldComponentUpdate() 返回 false,则不会调用 render()。

React组件在具有render()方法的同时,每个组件都包含一些 “生命周期方法”,你可以重写这些方法,以便于在运行过程中特定的阶段执行这些方法:

Mounting(挂载)

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

Updateing(更新)

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

Unmounting(卸载)

当组件从 DOM 中移除时会调用如下方法:

其他API

Each component also provides some other APIs:

setState() forceUpdate()

类属性

defaultProps displayName

对象属性

props state