组件栈追踪

本节目标：理解“组件栈追踪”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。 在开发环境下，React 16 会把渲染期间发生的所有错误打印到控制台，即使该应用意外的将这些错误掩盖。除了错误信息和 JavaScript 栈外，React 16 还提供了组件栈追踪。现在你可以准确地查看发生在组件树内的错误信息：

你也可以在组件栈追踪中查看文件名和行号，这一功能在

 Create React App

项目中默认开启：

如果你没有使用 Create React App，可以手动将该插件添加到你的 Babel 配置中。注意它仅用于开发环境，在生产环境必须将其禁用 。 注意 组件名称在栈追踪中的显示依赖于

Function.name

属性。如果你想要支持尚未提供该功能的旧版浏览器和设备（例如 IE 11），考虑在你的打包（bundled）应用程序中包含一个 Function.name 的 polyfill，如

function.name-polyfill

。或者，你可以在所有组件上显式设置

displayName

属性。