From 3ad3ca234861aca81f27a8dc941dc867be90863b Mon Sep 17 00:00:00 2001 From: Lcina <870206584@qq.com> Date: Sat, 2 Mar 2019 11:17:46 +0800 Subject: [PATCH 01/36] feat: Complete the translation of the --- content/docs/error-boundaries.md | 84 ++++++++++++++++---------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/content/docs/error-boundaries.md b/content/docs/error-boundaries.md index 1477329112..fb1ff8ca9e 100644 --- a/content/docs/error-boundaries.md +++ b/content/docs/error-boundaries.md @@ -4,25 +4,25 @@ title: Error Boundaries permalink: docs/error-boundaries.html --- -In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to [emit](https://github.com/facebook/react/issues/4026) [cryptic](https://github.com/facebook/react/issues/6895) [errors](https://github.com/facebook/react/issues/8579) on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them. +过去，组件内的 JavaScript 错误会导致 React 的内部状态被破坏，并且在下一次渲染时 [产生](https://github.com/facebook/react/issues/4026) [可能无法追踪的](https://github.com/facebook/react/issues/6895) [错误](https://github.com/facebook/react/issues/8579)。这些错误基本上是由应用代码中较早的错误引起的，但 React 并没有提供一种在组件中优雅处理这些错误的方式，也无法从错误中恢复。 -## Introducing Error Boundaries {#introducing-error-boundaries} +## 介绍错误边界（Error Boundaries） {#introducing-error-boundaries} -A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”. +部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决 React 用户这个问题，React 16 引入了一个新的概念 —— 错误边界。 -Error boundaries are React components that **catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI** instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. +错误边界是 **用于捕获子组件树中任意位置的 JavaScript 错误，记录错误并显示一个备用 UI** 的 React 组件，而不是使整个组件树崩溃。 错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。 -> Note +> 注意 > -> Error boundaries do **not** catch errors for: +> 错误边界 **无法** 捕获如下错误： > -> * Event handlers ([learn more](#how-about-event-handlers)) -> * Asynchronous code (e.g. `setTimeout` or `requestAnimationFrame` callbacks) -> * Server side rendering -> * Errors thrown in the error boundary itself (rather than its children) +> * 事件处理（[了解更多](#how-about-event-handlers)） +> * 异步代码（例如 `setTimeout` 或 `requestAnimationFrame` 回调函数） +> * 服务端渲染 +> * 它自身抛出来的错误（并非它的子组件） -A class component becomes an error boundary if it defines either (or both) of the lifecycle methods [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) or [`componentDidCatch()`](/docs/react-component.html#componentdidcatch). Use `static getDerivedStateFromError()` to render a fallback UI after an error has been thrown. Use `componentDidCatch()` to log error information. +如果一个类组件中定义了生命周期方法 [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) 或 [`componentDidCatch()`](/docs/react-component.html#componentdidcatch) 中的任意一个（或两个），那么它就变成一个错误边界 (error boundary)。当抛出错误后，使用 `static getDerivedStateFromError()` 渲染备用 UI ，使用 `componentDidCatch()` 记录错误信息。 ```js{7-10,12-15,18-21} class ErrorBoundary extends React.Component { @@ -52,7 +52,7 @@ class ErrorBoundary extends React.Component { } ``` -Then you can use it as a regular component: +然后你可以将它作为一个常规组件去使用： ```js @@ -60,53 +60,53 @@ Then you can use it as a regular component: ``` -Error boundaries work like a JavaScript `catch {}` block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application. +错误边界的工作方式类似于 JavaScript `catch {}`，但只是针对组件。只有类组件可以是错误边界，实际上大多数情况下, 您需要声明一次错误边界组件, 并在整个应用程序中使用它。 -Note that **error boundaries only catch errors in the components below them in the tree**. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how catch {} block works in JavaScript. +注意 **错误边界仅可以捕获其子组件的错误** ，它无法捕获其自身的错误。如果一个错误边界无法渲染错误信息，则错误会采用就近原则，冒泡至最接近的错误边界，这也类似于 JavaScript 中 catch {} 的工作机制。 -## Live Demo {#live-demo} +## 在线演示 {#live-demo} -Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) with [React 16](/blog/2017/09/26/react-v16.0.html). +查看通过 [React 16](/blog/2017/09/26/react-v16.0.html) [定义和使用错误边界的例子](/blog/2017/09/26/react-v16.0.html)。 -## Where to Place Error Boundaries {#where-to-place-error-boundaries} +## 放置错误边界的位置 {#where-to-place-error-boundaries} -The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application. +错误边界的粒度由你来决定，可以将其包装在最顶层的路由组件并为用户展示一个 “Something went wrong” 的错误信息，就像服务端框架经常处理崩溃一样。你也可以将单独的部件包装在错误边界以保护应用其他部分不崩溃。 -## New Behavior for Uncaught Errors {#new-behavior-for-uncaught-errors} +## 未捕获错误（Uncaught Errors）的新行为 {#new-behavior-for-uncaught-errors} -This change has an important implication. **As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.** +这一改变具有重要意义，**自 React 16 起，任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载。** -We debated this decision, but in our experience it is worse to leave corrupted UI in place than to completely remove it. For example, in a product like Messenger leaving the broken UI visible could lead to somebody sending a message to the wrong person. Similarly, it is worse for a payments app to display a wrong amount than to render nothing. +我们对这一决定饱含争论，但在我们的经验中放置一个错误的 UI 比完全移除它要更糟糕。例如，在类似 Messenger 的产品中留下一个异常可见的 UI 可能会导致用户将信息错发给别人。同样，对于支付类应用而言，显示错误的金额也比不呈现任何内容更糟糕。 -This change means that as you migrate to React 16, you will likely uncover existing crashes in your application that have been unnoticed before. Adding error boundaries lets you provide better user experience when something goes wrong. +此变化意味着当你迁入到 React 16 时，你可能会发现一些已存在你应用中但未曾注意到的崩溃。增加错误边界能够让你在应用发生异常时提供更好的用户体验。 -For example, Facebook Messenger wraps content of the sidebar, the info panel, the conversation log, and the message input into separate error boundaries. If some component in one of these UI areas crashes, the rest of them remain interactive. +例如，Facebook Messenger 将侧边栏、信息面板、对话框以及信息输入框包装在单独的错误边界中。如果其中的某些 UI 组件崩溃，其余部分仍然能够交互。 -We also encourage you to use JS error reporting services (or build your own) so that you can learn about unhandled exceptions as they happen in production, and fix them. +我们也鼓励使用 JS 错误报告服务（或自行构建），这样你能了解关于生产环境中出现的未捕获异常，并将其修复。 -## Component Stack Traces {#component-stack-traces} +## 组件栈追踪 {#component-stack-traces} -React 16 prints all errors that occurred during rendering to the console in development, even if the application accidentally swallows them. In addition to the error message and the JavaScript stack, it also provides component stack traces. Now you can see where exactly in the component tree the failure has happened: +React 16 会在渲染期间将所有在开发环境下抛出的错误打印到控制台，即使应用程序意外的将其掩盖。除了错误信息和 JavaScript 栈外，它还提供了组件栈追踪。现在你可以准确地查看发生在组件树内的错误信息： Error caught by Error Boundary component -You can also see the filenames and line numbers in the component stack trace. This works by default in [Create React App](https://github.com/facebookincubator/create-react-app) projects: +你也可以在组件栈追踪中查看文件名和行号，这一功能在 [Create React App](https://github.com/facebookincubator/create-react-app) 项目中默认开启： Error caught by Error Boundary component with line numbers -If you don’t use Create React App, you can add [this plugin](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source) manually to your Babel configuration. Note that it’s intended only for development and **must be disabled in production**. +如果你没有使用 Create React App ，可以手动将[该插件](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source)添加到你的 Babel 配置中。注意它仅可在开发环境下使用，而 **生产环境必须将其禁用** 。 -> Note +> 注意 > -> Component names displayed in the stack traces depend on the [`Function.name`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name) property. If you support older browsers and devices which may not yet provide this natively (e.g. IE 11), consider including a `Function.name` polyfill in your bundled application, such as [`function.name-polyfill`](https://github.com/JamesMGreene/Function.name). Alternatively, you may explicitly set the [`displayName`](/docs/react-component.html#displayname) property on all your components. +> 组件名称在栈追踪中的显示依赖于 [`Function.name`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name) 属性。如果你想要支持尚未提供该功能的旧版浏览器和设备（例如 IE 11），考虑在你的打包（bundled）应用程序中包含一个 `Function.name` 的 polyfill，如 [`function.name-polyfill`](https://github.com/JamesMGreene/Function.name) 。或者，你可以在所有组件上显式设置 [`displayName`](/docs/react-component.html#displayname) 属性。 -## How About try/catch? {#how-about-trycatch} +## 关于 try/catch ？ {#how-about-trycatch} -`try` / `catch` is great but it only works for imperative code: +`try` / `catch` 很棒但它仅能用于命令式代码（imperative code）： ```js try { @@ -116,21 +116,21 @@ try { } ``` -However, React components are declarative and specify *what* should be rendered: +然而，React 组件是声明式的并且具体指出 *什么* 需要被渲染： ```js