3.2　错误处理

React 16之前，组件在运行期间如果执行出错，就会阻塞整个应用的渲染，这时候只能刷新页面才能恢复应用。React 16引入了新的错误处理机制，默认情况下，当组件中抛出错误时，这个组件会从组件树中卸载，从而避免整个应用的崩溃。这种方式比起之前的处理方式有所进步，但用户体验依然不够友好。React 16还提供了一种更加友好的错误处理方式——错误边界（Error Boundaries）。错误边界是能够捕获子组件的错误并对其做优雅处理的组件。优雅的处理可以是输出错误日志、显示出错提示等，显然这比直接卸载组件要更加友好。

定义了componentDidCatch(error, info)这个方法的组件将成为一个错误边界，现在我们创建一个组件ErrorBoundary：

然后在App中使用ErrorBoundary：

点击更新按钮后，Profile接收到的属性user为null，程序会抛出TypeError，这个错误会被ErrorBoundary捕获，并在界面上显示出错提示。注意，使用create-react-app创建的项目，当程序发生错误时，create-react-app会在页面上创建一个浮层显示错误信息，要观察ErrorBoundary的正确效果，需要先关闭错误浮层。

本节项目源代码的目录为/chapter-03/react16-error-boundary。