React生命周期-16.8新增

发表于 | 分类于

组件的生命周期

三个状态（挂载 更新 销毁）

  • Mounting：已插入真实 DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真实 DOM

旧的生命周期处理函数

image

render()

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

当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：

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

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

如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render() 为纯函数，可以使组件更容易思考。

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

constructor

如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。

1
2
3
4
5
6
7
8
9
constructor(props){
    super(props)
    
    // 通过给 this.state 赋值对象来初始化内部 state
    
    this.state = {}
    // 为事件处理函数绑定实例
    this.handleClick = this.handleClick.bind(this);
}

React组件的构造函数将会在 React 组件挂载之前被调用

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

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

只能在构造函数中直接为 this.state 赋值。如需在其他方法中赋值，你应使用 this.setState() 替代。

componentWillMount（16废除）

组件将要挂载/渲染

componentDidMount

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。

可以在componentDidMount()里面调用setTimeout, setInterval、发送AJAX进行网络请求等操作(防止异部操作阻塞UI)。

这个方法是建立任何订阅的一个好地方。如果你那么做了，别忘了在componentWillUnmount()取消订阅

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

componentWillUpdate（16废除）

1
2
3
componentWillUpdate(nextProps,nextState){
    
}

在组件接收到新的props或state但还没有render时被调用 ，在初始化时不会被调用

componentDidUpdate

1
2
3
componentDidUpdate(prevProps, prevState, snapshot){
    
}

在组件完成更新后立即调用。在初始化(初次渲染)时不会被调用。

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

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

当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。（例如，当 props 未发生变化时，则不会执行网络请求）。

1
2
3
4
5
6
componentDidUpdate(prevProps) {
  // 典型用法（不要忘记比较 props）：
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

你也可以在 componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语件里，正如上述的例子那样进行处理，否则会导致死循环。它还会导致额外的重新渲染，虽然用户不可见，但会影响组件性能。

componentWillUnmount

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

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

componentWillReceiveProps（16废除）

1
2
3
componentWillReceiveProps(nextProps){
    
}

已加载组件收到新的props参数时调用

shouldComponentUpdate

1
2
3
shouldComponentUpdate(nextProps,nextState){
    
}

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

返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

可以在确认不需要更新组件时使用return false，
前后不改变state值的setState（理论上）和无数据交换的父组件的重渲染都会导致组件的重渲染，但你可以在shouldComponentUpdate这道两者必经的关口阻止这种浪费性能的行为

不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify()。这样非常影响效率，且会损害性能。

16新的生命周期

  1. 新增
  • static getDerivedStateFromProps(props, state)
  • static getDerivedStateFromError()
  • componentDidCatch()
  1. 废除UNSAFE
  • componentWillMount()
  • componentWillUpdate()
  • componentWillReceiveProps()
  • getSnapshotBeforeUpdate()

static getDerivedStateFromProps

1
2
3
static getDerivedStateFromProps(props, state){
    
}

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

不管原因是什么，都会在每次渲染前触发此方法。这与 UNSAFE_componentWillReceiveProps 形成对比，后者仅在父组件重新渲染时触发，而不是在内部调用 setState 时

getSnapshotBeforeUpdate

1
getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。

应返回 snapshot 的值（或 null）。应返回 snapshot 的值（或 null）。

static getDerivedStateFromError()

1
static getDerivedStateFromError(error)

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

getDerivedStateFromError() 会在渲染阶段调用，因此不允许出现副作用。 如遇此类情况，请改用 componentDidCatch()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染可以显降级 UI
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义的降级  UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

componentDidCatch()

1
componentDidCatch(error, info)

此生命周期在后代组件抛出错误后被调用。 它接收两个参数：

  1. error： 抛出的错误
  2. info：带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class PotentialError extends React.Component {   
  constructor(props) {     
    super(props);     
    this.state = { error: false };
  }
  componentDidCatch(error, info) {     
    this.setState({ error, info });
  }
  render() {
    if (this.state.error) {
      return <h1>Error: {this.state.error.toString()}</h1>;
    }
    return this.props.children;   
  } 
}

然后在顶部或任何地方，你可以这样使用它

1
<PotentialError><AwesomeApp /></PotentialError>

这将告诉你组件在哪里失效！

让我知道你正在使用错误边界！

调用Setstate后触发的声明周期

  1. shouldComponentUpdate
  2. componentWillUpdate
  3. render
  4. componentDidupdate

在生命周期中，以 render 为界，无论是挂载还是更新过程，render 之前，this.state 和 props 都是不会发生更新的，直到 render 执行执行完成才得以更新，除非遇到 shouldComponentUpdate 返回 false, 只有这种情况，即使不执行 render 也能得到数据更新

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序：

  1. constructor()
  2. static getDerivedStateFromProps()
  3. render()
  4. componentDidMount()

更新

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

  1. static getDerivedStateFromProps()
  2. shouldComponentUpdate()
  3. render()
  4. getSnapshotBeforeUpdate()
  5. componentDidUpdate()

卸载

当组件从 DOM 中移除时会调用如下方法：componentWillUnmount()

错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

  1. static getDerivedStateFromError()
  2. componentDidCatch()

阻止组件渲染

组件的 render 方法返回 null可以阻止组件渲染，但并不会影响该组件生命周期方法的回调，componentWillUpdate 和 componentDidUpdate 依然可以被调用。