高性能 React：3 个新工具加速你的应用 #1911

sunui · 2017-07-17T07:40:58Z

@sqrthree 翻译完成 #1888

yzgyyang · 2017-07-17T15:17:29Z

申请校对 @sqrthree

linhe0x0 · 2017-07-17T15:17:34Z

@yzgyyang 好的呢 🍺

yzgyyang

@sunui @sqrthree 校对完成。翻译非常棒，几乎不用改！

yzgyyang · 2017-07-17T15:19:01Z

TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md


 ![](https://cdn-images-1.medium.com/max/2000/1*mJFYp7LKVzZM3PPjFb0QXQ.png)

-React is usually pretty fast, but it’s easy to make small mistakes that lead to performance issues. Slow component mounts, deep component trees, and unnecessary render cycles can quickly add up to an app that feels slow.
+通常来说 React 是相当快的，但也很容易犯一些错误导致出现性能问题。组件挂载过慢、组件树过深和一些非必要的渲染周期可以迅速地联手拉低你的应用速度。


“但也很容易犯一些错误”应该指开发者，没有主语会引起歧义。

yzgyyang · 2017-07-17T15:20:52Z

TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md


-**Note:** For now, this feature only works in Chrome, Edge, and IE, since it leverages the User Timing API which has yet to be implemented in all browsers.
+**注意：** 目前，这一特性仅支持 Chrome、Edge、和 IE，因为它调用的 User Timing API 还没有在所有浏览器中实现。


Edge 后的标点可以去掉

yzgyyang · 2017-07-17T15:22:20Z

TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md


-One caveat here is that the timing numbers in the timeline are for the development build of React, which is much slower than prod. In fact, the performance timeline itself even slows down your app. While these numbers shouldn’t be considered representative of real-world performance, the *relative *timings between different components are accurate. Also, whether or not a component updates at all is not dependent on a prod build.
+这里需要注意的是时间轴中的计时时长是针对 React 的开发环境构建的，会比生产环境慢很多。实际上性能时间轴本身也会拖慢你的应用。虽然这些时长不能代表真正的性能指标，但不同组件间的**相对**时间是精确的。而且一个组件是否更新完全不取决于是否是生产环境的构建。


更新完全 -> 完全被更新

yzgyyang · 2017-07-17T15:23:19Z

TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md


 ### Tool #2: why-did-you-update

-One of the most common issues that affects performance in React is unnecessary render cycles. By default, React components will re-render whenever their parent renders, even if their props didn’t change.
+在 React 中最影响性能普遍的问题之一就是非必要的渲染周期。默认情况下，一旦父组件渲染，React 组件就会跟着重新渲染，甚至即使它们的 props 没有变化也是如此。


甚至即使 -> 即使

yzgyyang · 2017-07-17T15:24:11Z

TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md


-Generally, if `render` runs, and there were no changes to the virtual DOM, it is a wasted render cycle since the `render` method should be pure and not have any side effects. In a large-scale React app, it can be tricky to detect places where this happens, but luckily, there’s a tool that can help!
+一般来讲，如果 `render` 运行，并且虚拟 DOM 没有改变，而且既然 `render` 应该是个纯净的没有任何副作用的方法，那么这就是一个浪费的渲染周期。在一个大型应用中检测这种事情是非常困难的，但幸运的是有一个工具可以帮地上忙。


帮地上忙 -> 帮得上忙

yzgyyang · 2017-07-17T15:25:41Z

TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md


 ![](https://cdn-images-1.medium.com/max/1000/1*Lb4nr_WLwnLt63jUoszrnQ.png)

-`why-did-you-update` is a library that hooks into React and detects potentially unnecessary component renders. It detects when a component’s `render` method is called despite its props not having changed.
+`why-did-you-update` 是一个 React 钩子工具，用来检测潜在的非必要组件渲染。它会检测到 props 没有改变的组件 `render` 方法调用。


它会检测到 props 没有改变的组件 render 方法调用。
->
它会检测到被调用但 props 没有改变的组件 render。

yzgyyang · 2017-07-17T15:28:10Z

TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md


    class DumbComponent extends PureComponent {
      render() {
        return <div> {this.props.value} </div>;
      }
    }

-Then, the component will only re-render when its props actually change. That’s it!
+那么这个组件就只有当它的 props 实际发生变化的时候才会重新渲染了。就是这样！


那么这个组件就只有当它的 props 实际发生变化的时候才会重新渲染了。
->
那么只有当这个组件的 props 实际发生变化时它才会被重新渲染了。

prop 是否可以翻译为属性？我看下文里有些地方已经翻译了。

props 在 react 相关的文章中都基本上都不翻译那

yzgyyang · 2017-07-17T15:30:01Z

TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md


 ![](https://cdn-images-1.medium.com/max/1000/1*s_rMyo6NbrAsP-XtvBaXFg.png)

-[LogRocket](https://logrocket.com) is like a DVR for web apps, recording *literally**everything* that happens on your site. Instead of guessing why problems happen, you can replay sessions with bugs or performance issues to quickly understand the root cause.
+[LogRocket](https://logrocket.com) 就像是 web 应用的 DVR，会记录发生在你的站点上的**所有的一切**。并不是猜测问题发生的原因，而是你可以重现带有 bug 或性能问题的会话快速了解问题的根源。


并不是猜测问题发生的原因，而是你可以重现带有 bug 或性能问题的会话快速了解问题的根源。
->
你可以重现带有 bug 或性能问题的会话来快速了解问题的根源，而不用猜测问题发生的原因。

reid3290 · 2017-07-18T10:05:28Z

@sqrthree 校对认领

linhe0x0 · 2017-07-18T10:05:36Z

@reid3290 妥妥哒 🍻

linhe0x0 · 2017-07-19T05:37:42Z

@reid3290 不要忘了来校对哈。

reid3290 · 2017-07-19T07:18:16Z

TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md


-The text in brackets like `[update]` describes which part of the component lifecycle is taking place. The timeline breaks down each step, so you can see fine-grained timings on methods like `[componentDidMount]``[componentWillReceiveProps]``[ctor]` (constructor) and `[render].`
+像 `[update]` 这样中括号内的文字描述的是声明周期的哪一个阶段正在发生。把时间轴按照步骤分解，你可以看到依据方法的细粒度的计时，比如  `[componentDidMount]` `[componentWillReceiveProps]` `[ctor]` (constructor) 和 `[render]`。


声明周期 => 生命周期

reid3290 · 2017-07-19T07:24:17Z

TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md


 ### Tool #2: why-did-you-update

-One of the most common issues that affects performance in React is unnecessary render cycles. By default, React components will re-render whenever their parent renders, even if their props didn’t change.
+在 React 中最影响性能普遍的问题之一就是非必要的渲染周期。默认情况下，一旦父组件渲染，React 组件就会跟着重新渲染，即使它们的 props 没有变化也是如此。


普遍二字建议删去

reid3290 · 2017-07-19T07:26:33Z

TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md


-Generally, if `render` runs, and there were no changes to the virtual DOM, it is a wasted render cycle since the `render` method should be pure and not have any side effects. In a large-scale React app, it can be tricky to detect places where this happens, but luckily, there’s a tool that can help!
+一般来讲，如果 `render` 运行，并且虚拟 DOM 没有改变，而且既然 `render` 应该是个纯净的没有任何副作用的方法，那么这就是一个浪费的渲染周期。在一个大型应用中检测这种事情是非常困难的，但幸运的是有一个工具可以帮得上忙。


浪费的渲染周期 => 无谓（或者无意义的、不必要的、多余的）的渲染周期

reid3290 · 2017-07-19T07:31:29Z

TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md

@@ -90,73 +90,73 @@ Generally, if `render` runs, and there were no changes to the virtual DOM, it is
      whyDidYouUpdate(React)
    }

-**Note** that this tool is great in local development but make sure it’s disabled in production since it will slow down your app.
+**注意**这个工具在本地开发环境使用起来非常棒，但是要确保生产环境要禁用掉，因为它会拖慢你的应用。


注意后面少个空格，或者可以用个冒号

reid3290 · 2017-07-19T07:37:24Z

@sqrthree @sunui 校对完毕

sunui · 2017-07-19T14:51:20Z

@sqrthree 根据校对意见修改完成

linhe0x0

还有一些小问题需要调整下哈。

linhe0x0 · 2017-07-21T03:23:20Z

TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md


-The text in brackets like `[update]` describes which part of the component lifecycle is taking place. The timeline breaks down each step, so you can see fine-grained timings on methods like `[componentDidMount]``[componentWillReceiveProps]``[ctor]` (constructor) and `[render].`
+像 `[update]` 这样中括号内的文字描述的是声命周期的哪一个阶段正在发生。把时间轴按照步骤分解，你可以看到依据方法的细粒度的计时，比如  `[componentDidMount]` `[componentWillReceiveProps]` `[ctor]` (constructor) 和 `[render]`。


『声命周期』=>『生命周期』

linhe0x0 · 2017-07-21T03:26:43Z

TODO/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md

@@ -90,73 +90,73 @@ Generally, if `render` runs, and there were no changes to the virtual DOM, it is
      whyDidYouUpdate(React)
    }

-**Note** that this tool is great in local development but make sure it’s disabled in production since it will slow down your app.
+**注意：**这个工具在本地开发环境使用起来非常棒，但是要确保生产环境要禁用掉，因为它会拖慢你的应用。


sunui · 2017-07-21T03:38:36Z

@sqrthree 修改完成

linhe0x0 · 2017-07-21T06:44:19Z

已经 merge 啦~ 快快麻溜发布到掘金专栏然后给我发下链接，方便及时添加积分哟。

高性能 React：3 个新工具加速你的应用

ec551c8

linhe0x0 added the 校对认领 label Jul 17, 2017

linhe0x0 added the 正在校对 label Jul 17, 2017

yzgyyang reviewed Jul 17, 2017

View reviewed changes

linhe0x0 added the 前端 label Jul 18, 2017

linhe0x0 mentioned this pull request Jul 18, 2017

高性能 React：3 个新工具加速你的应用 #1888

Closed

linhe0x0 removed the 校对认领 label Jul 18, 2017

根据一校意见修改

7d5b6d6

reid3290 reviewed Jul 19, 2017

View reviewed changes

根据二校意见修改

4162bfd

linhe0x0 requested changes Jul 21, 2017

View reviewed changes

纠正两处错误

5176662

调整代码样式

46a2dc2

linhe0x0 approved these changes Jul 21, 2017

View reviewed changes

linhe0x0 merged commit d206a2e into xitu:master Jul 21, 2017

linhe0x0 added 翻译完成 and removed 正在校对 labels Jul 21, 2017

sunui deleted the translate branch September 8, 2017 17:49

cdadar pushed a commit to cdadar/gold-miner that referenced this pull request Dec 8, 2017

高性能 React：3 个新工具加速你的应用 (xitu#1911)

f071cc1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

高性能 React：3 个新工具加速你的应用 #1911

高性能 React：3 个新工具加速你的应用 #1911

sunui commented Jul 17, 2017 •

edited

Loading

yzgyyang commented Jul 17, 2017

linhe0x0 commented Jul 17, 2017

yzgyyang left a comment

yzgyyang Jul 17, 2017

yzgyyang Jul 17, 2017

yzgyyang Jul 17, 2017

yzgyyang Jul 17, 2017

yzgyyang Jul 17, 2017

yzgyyang Jul 17, 2017

yzgyyang Jul 17, 2017

yzgyyang Jul 17, 2017

sunui Jul 19, 2017

yzgyyang Jul 17, 2017

reid3290 commented Jul 18, 2017

linhe0x0 commented Jul 18, 2017

linhe0x0 commented Jul 19, 2017

reid3290 Jul 19, 2017

reid3290 Jul 19, 2017

reid3290 Jul 19, 2017

reid3290 Jul 19, 2017

reid3290 commented Jul 19, 2017

sunui commented Jul 19, 2017

linhe0x0 left a comment

linhe0x0 Jul 21, 2017

linhe0x0 Jul 21, 2017

sunui commented Jul 21, 2017

linhe0x0 commented Jul 21, 2017


		Note: For now, this feature only works in Chrome, Edge, and IE, since it leverages the User Timing API which has yet to be implemented in all browsers.
		注意：目前，这一特性仅支持 Chrome、Edge、和 IE，因为它调用的 User Timing API 还没有在所有浏览器中实现。


		One caveat here is that the timing numbers in the timeline are for the development build of React, which is much slower than prod. In fact, the performance timeline itself even slows down your app. While these numbers shouldn’t be considered representative of real-world performance, the relative timings between different components are accurate. Also, whether or not a component updates at all is not dependent on a prod build.
		这里需要注意的是时间轴中的计时时长是针对 React 的开发环境构建的，会比生产环境慢很多。实际上性能时间轴本身也会拖慢你的应用。虽然这些时长不能代表真正的性能指标，但不同组件间的相对时间是精确的。而且一个组件是否更新完全不取决于是否是生产环境的构建。


		Generally, if `render` runs, and there were no changes to the virtual DOM, it is a wasted render cycle since the `render` method should be pure and not have any side effects. In a large-scale React app, it can be tricky to detect places where this happens, but luckily, there’s a tool that can help!
		一般来讲，如果 `render` 运行，并且虚拟 DOM 没有改变，而且既然 `render` 应该是个纯净的没有任何副作用的方法，那么这就是一个浪费的渲染周期。在一个大型应用中检测这种事情是非常困难的，但幸运的是有一个工具可以帮地上忙。


		The text in brackets like `[update]` describes which part of the component lifecycle is taking place. The timeline breaks down each step, so you can see fine-grained timings on methods like `[componentDidMount]``[componentWillReceiveProps]``[ctor]` (constructor) and `[render].`
		像 `[update]` 这样中括号内的文字描述的是声明周期的哪一个阶段正在发生。把时间轴按照步骤分解，你可以看到依据方法的细粒度的计时，比如 `[componentDidMount]` `[componentWillReceiveProps]` `[ctor]` (constructor) 和 `[render]`。


		The text in brackets like `[update]` describes which part of the component lifecycle is taking place. The timeline breaks down each step, so you can see fine-grained timings on methods like `[componentDidMount]``[componentWillReceiveProps]``[ctor]` (constructor) and `[render].`
		像 `[update]` 这样中括号内的文字描述的是声命周期的哪一个阶段正在发生。把时间轴按照步骤分解，你可以看到依据方法的细粒度的计时，比如 `[componentDidMount]` `[componentWillReceiveProps]` `[ctor]` (constructor) 和 `[render]`。

高性能 React：3 个新工具加速你的应用 #1911

高性能 React：3 个新工具加速你的应用 #1911

Conversation

sunui commented Jul 17, 2017 • edited Loading

yzgyyang commented Jul 17, 2017

linhe0x0 commented Jul 17, 2017

yzgyyang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

reid3290 commented Jul 18, 2017

linhe0x0 commented Jul 18, 2017

linhe0x0 commented Jul 19, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

reid3290 commented Jul 19, 2017

sunui commented Jul 19, 2017

linhe0x0 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sunui commented Jul 21, 2017

linhe0x0 commented Jul 21, 2017

sunui commented Jul 17, 2017 •

edited

Loading