静态 getDerivedStateFromError()

Question

I was reading a doc about Error boundaries. In that how did static getDerivedStateFromError() lifecycle update the state of hasError without setState?

  class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

Answer 1

这只是一个 React 内部构件。

React 负责执行生命周期方法（以及渲染）。如果是这样，React 可以将此类方法包装到 try/catch 中，以通过执行 getDerivedStateFromError 方法和随后的 setState.

来处理错误

需要此方法的静态性质，以排除组件上任何 side-effects 的可能性。

静态 getDerivedStateFromError()

static getDerivedStateFromError()

javascript

reactjs

react-native

react-lifecycle