React组件中做错误处理

• 类组件中做错误处理-错误边界

        错误边界本身是一个组件，这类组件可以在渲染期间、生命周期方法和整个组件树的构造函数中捕获并打印发生在其自组件树任何位置的JavaScript错误。

        在react中存在内置方法getDerivedStateFromError(error)，如果错误边界内存在错误，则会捕获错误，其返回值通常为一个对象，这个对象里面的熟悉会直接覆盖state中的同名属性值。

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

  static getDerivedStateFromError(error) {
    return {error};
  };
  
  render() {
    if (this.state.error) return <h1>check your code</h1>;
    return this.props.childen;
  }
}

export default ErrorBoundary;

• 函数组件中做错误处理

        在函数体内使用JavaScript的原生方法try {...} catch(error) {...}