0802

[LeungKaMing]

React16.0.0 beta

关于最近发布的beta版，新引入了一个概念：错误划分。

之前版本的React一直是遇到错误就会导致整个应用崩溃，为了解决这类问题，16.0.0将会有一个“错误分界线”的概念，在任何组件树的任何地方都能接收到JS的错误，打印并反馈对应UI，而不会是一串报错。为此，React新增了一个生命周期来处理：componentDidCatch(error, info)。

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

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>NO,NO,NO!Something went wrong.</h1>;
    }
    // 判断是否将当前组件做成插槽
    if (this.props.children) {
      return this.props.children
    }
    // 没做插槽的话默认返回文案
    return <h1>Hey,buddy!</h1>
  }
}

带插槽的样子

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

• componentDidCatch()生命周期方法其实跟JS里面的try...catch...很像，只不过前者是给组件用的。
• 建议16.0.0正式发布后，尽量声明一个错误划分的组件，并在应用中使用。
• 错误划分组件是不能在内部捕捉到自身的错误，只会把错误传递到最接近的错误划分组件。
• 错误划分的粒度是取决于使用者，可以把顶级路由包起来，也可以把小组件包起来，以避免它们能够在应用稳定运行。

没被捕获的错误

在16.0.0没被 错误划分组件 所捕获的错误，将会导致整个React组件树的卸载。为什么会直接卸载而不是保留部分组件？

举例：像某些聊天产品，虽然应用崩溃了，但还是可以让用户发信息，这就可能导致用户发送了错误信息，所以显示部分UI远比不显示UI还要糟糕；而如果我们对某个对话框做了错误划分的话，那么依然可以通过UI引导用户去做相应操作。