docs(cn): translate content/docs/faq-functions.md into Chinese #136

sichenguo · 2019-02-25T13:13:13Z

complete translation of FAQ/Passing Functions to Components #134

netlify · 2019-02-25T13:16:54Z

Deploy preview for cn-reactjs ready!

Built with commit 61b4ecb

https://deploy-preview-136--cn-reactjs.netlify.com

netlify · 2019-02-25T13:19:23Z

Deploy preview for zh-hans-reactjs ready!

Built with commit 61b4ecb

https://deploy-preview-136--zh-hans-reactjs.netlify.com

QC-L · 2019-02-25T15:41:53Z

content/docs/faq-functions.md

 permalink: docs/faq-functions.html
 layout: docs
 category: FAQ
 ---

-### How do I pass an event handler (like onClick) to a component? {#how-do-i-pass-an-event-handler-like-onclick-to-a-component}
+### 如何将事件处理器（比如 onClick）传递给组件？{#如何将事件处理器（比如onClick）传递给组件}


{} 中的内容不翻译，请修改

yuqingc · 2019-04-03T15:22:25Z

content/docs/faq-functions.md


-Generally speaking, yes, it is OK, and it is often the easiest way to pass parameters to callback functions.
+一般来说是可以的，并且直接箭头函数是向回调函数传递参数的最简单的办法。


并且直接箭头函数？是不是打错了啊。。

Suggested change

一般来说是可以的，并且直接箭头函数是向回调函数传递参数的最简单的办法。

一般来说是可以的，并且使用箭头函数是向回调函数传递参数的最简单的办法。

yuqingc · 2019-04-03T15:24:00Z

content/docs/faq-functions.md

@@ -104,15 +104,15 @@ var method = obj.method;
 method();
 ```

-Binding methods helps ensure that the second snippet works the same way as the first one.
+bind 方法确保了第二种写法与第一种写法相同。


第 94 行翻译成了绑定，所以这里也翻译成“绑定”吧，统一一下。

这个就 bind 吧~

yuqingc · 2019-04-03T15:26:39Z

content/docs/faq-functions.md


-[This post by Yehuda Katz](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) explains what binding is, and how functions work in JavaScript, in detail.
+[This post by Yehuda Katz](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) 详细解释了什么是绑定，和函数在 JavaScript 中怎么起作用。


个人看法：“和”用来连接两个名词短语好一点，连接两个分句感觉用“以及”通顺一点。

Suggested change

[This post by Yehuda Katz](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) 详细解释了什么是绑定，和函数在 JavaScript 中怎么起作用。

[This post by Yehuda Katz](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) 详细解释了什么是绑定，以及函数在 JavaScript 中怎么起作用。

yuqingc · 2019-04-03T15:27:52Z

content/docs/faq-functions.md


-Make sure you aren't _calling the function_ when you pass it to the component:
+确保你没有*调用函数*，在你传递函数给组件时：


Suggested change

确保你没有*调用函数*，在你传递函数给组件时：

确保你在传递一个函数给组件时，没有*调用这个函数*：

yuqingc · 2019-04-03T15:29:21Z

content/docs/faq-functions.md


-Alternately, you can use DOM APIs to store data needed for event handlers. Consider this approach if you need to optimize a large number of elements or have a render tree that relies on React.PureComponent equality checks.
+同样的，也可以使用DOM API来存储事件处理器需要的数据。如果需要优化大量元素或使用依赖于 `React.PureComponent` 相等性检查的渲染树，请考虑使用此方法。


Suggested change

同样的，也可以使用DOM API来存储事件处理器需要的数据。如果需要优化大量元素或使用依赖于 `React.PureComponent` 相等性检查的渲染树，请考虑使用此方法。

同样的，也可以使用 DOM API 来存储事件处理器需要的数据。如果需要优化大量元素或使用依赖于 `React.PureComponent` 相等性检查的渲染树，请考虑使用此方法。

yuqingc · 2019-04-03T15:33:36Z

content/docs/faq-functions.md

 >
-> `_.debounce`, `_.throttle` and `raf-schd` provide a `cancel` method to cancel delayed callbacks. You should either call this method from `componentWillUnmount` _or_ check to ensure that the component is still mounted within the delayed function.
+> `_.debounce` , `_.throttle` 和 `raf-schd` 都提供了一个 `cancel` 方法来取消延迟回调。 所以要么调用 `componentWillUnmount`，否则需要对代码进行检查来保证在延迟函数有效期间内组件始终挂载。


Suggested change

> `_.debounce` , `_.throttle` 和 `raf-schd` 都提供了一个 `cancel` 方法来取消延迟回调。所以要么调用 `componentWillUnmount`，否则需要对代码进行检查来保证在延迟函数有效期间内组件始终挂载。

> `_.debounce`、`_.throttle` 和 `raf-schd` 都提供了一个 `cancel` 方法来取消延迟回调。你需要在 `componentWillUnmount` 中调用该方法，或者对代码进行检查来保证在延迟函数有效期间内组件始终挂载。

yuqingc · 2019-04-03T15:34:22Z

content/docs/faq-functions.md


-Throttling prevents a function from being called more than once in a given window of time. The example below throttles a "click" handler to prevent calling it more than once per second.
+节流阻止函数在给定时间窗口内被调不能超过一次。下面这个例子会节流 “click” 事件处理器每秒钟的只能调用一次。


Suggested change

节流阻止函数在给定时间窗口内被调不能超过一次。下面这个例子会节流 “click” 事件处理器每秒钟的只能调用一次。

节流阻止函数在给定时间窗口内被调不能超过一次。下面这个例子会节流 “click” 事件处理器，使其每秒钟的只能调用一次。

yuqingc · 2019-04-03T15:36:37Z

content/docs/faq-functions.md


-[`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) is a way of queuing a function to be executed in the browser at the optimal time for rendering performance. A function that is queued with `requestAnimationFrame` will fire in the next frame. The browser will work hard to ensure that there are 60 frames per second (60 fps). However, if the browser is unable to it will naturally *limit* the amount of frames in a second. For example, a device might only be able to handle 30 fps and so you will only get 30 frames in that second. Using `requestAnimationFrame` for throttling is a useful technique in that it prevents you from doing more than 60 updates in a second. If you are doing 100 updates in a second this creates additional work for the browser that the user will not see anyway.
+[`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) 是在浏览器中排队等待执行的一种方法，它可以在呈现性能的最佳时间执行。一个函数被 `requestAnimationFrame` 放入队列后将会在下一帧触发。浏览器会努力确保每秒 60 帧（60fps）。然而，如果浏览器无法确保，那么自然会*限制*每秒的帧数。例如，某个设备可能只能处理每秒 30 帧，所以每秒只能得到 30 帧。使用  `requestAnimationFrame` 来节流是一种有用的技术，它可以防止在一秒中进行 60 帧以上的更新。如果要求一秒钟内完成100次更新，则会为浏览器创建额外的负担，而用户无法看到这些工作。


Suggested change

[`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) 是在浏览器中排队等待执行的一种方法，它可以在呈现性能的最佳时间执行。一个函数被 `requestAnimationFrame` 放入队列后将会在下一帧触发。浏览器会努力确保每秒 60 帧（60fps）。然而，如果浏览器无法确保，那么自然会*限制*每秒的帧数。例如，某个设备可能只能处理每秒 30 帧，所以每秒只能得到 30 帧。使用 `requestAnimationFrame` 来节流是一种有用的技术，它可以防止在一秒中进行 60 帧以上的更新。如果要求一秒钟内完成100次更新，则会为浏览器创建额外的负担，而用户无法看到这些工作。

[`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) 是在浏览器中排队等待执行的一种方法，它可以在呈现性能的最佳时间执行。一个函数被 `requestAnimationFrame` 放入队列后将会在下一帧触发。浏览器会努力确保每秒 60 帧（60fps）。然而，如果浏览器无法确保，那么自然会*限制*每秒的帧数。例如，某个设备可能只能处理每秒 30 帧，所以每秒只能得到 30 帧。使用 `requestAnimationFrame` 来节流是一种有用的技术，它可以防止在一秒中进行 60 帧以上的更新。如果一秒钟内完成 100 次更新，则会为浏览器带来额外的负担，而用却户无法感知到这些工作。

yuqingc · 2019-04-03T15:38:05Z

content/docs/faq-functions.md

 >
->Using this technique will only capture the last published value in a frame. You can see an example of how this optimization works on [`MDN`](https://developer.mozilla.org/en-US/docs/Web/Events/scroll)
+>使用这个方法时只能获取帧中最后发布的值。也可以在 [`MDN`](https://developer.mozilla.org/en-US/docs/Web/Events/scroll) 中看优化的示例。


Suggested change

>使用这个方法时只能获取帧中最后发布的值。也可以在 [`MDN`](https://developer.mozilla.org/en-US/docs/Web/Events/scroll) 中看优化的示例。

>使用这个方法时只能获取某一帧中最后发布的值。也可以在 [`MDN`](https://developer.mozilla.org/en-US/docs/Web/Events/scroll) 中看优化的示例。

yuqingc · 2019-04-03T15:39:48Z

content/docs/faq-functions.md


-When testing your rate limiting code works correctly it is helpful to have the ability to fast forward time. If you are using [`jest`](https://facebook.github.io/jest/) then you can use [`mock timers`](https://facebook.github.io/jest/docs/en/timer-mocks.html) to fast forward time. If you are using `requestAnimationFrame` throttling then you may find [`raf-stub`](https://github.com/alexreardon/raf-stub) to be a useful tool to control the ticking of animation frames.
+在测试速率限制的代码是否正确工作的时候，如果可以（对动画或操作）进行快进将会很有帮助。如果正在使用 [`jest`](https://facebook.github.io/jest/) ，那么可以使用 [`mock timers`](https://facebook.github.io/jest/docs/en/timer-mocks.html) 来快进。如果正在使用  `requestAnimationFrame` 节流，那么就会发现 [raf-stub]([`raf-stub`](https://github.com/alexreardon/raf-stub)) 是一个控制动画帧的十分有用的工具。


Suggested change

在测试速率限制的代码是否正确工作的时候，如果可以（对动画或操作）进行快进将会很有帮助。如果正在使用 [`jest`](https://facebook.github.io/jest/) ，那么可以使用 [`mock timers`](https://facebook.github.io/jest/docs/en/timer-mocks.html) 来快进。如果正在使用 `requestAnimationFrame` 节流，那么就会发现 [raf-stub]([`raf-stub`](https://github.com/alexreardon/raf-stub)) 是一个控制动画帧的十分有用的工具。

在测试速率限制的代码是否正确工作的时候，如果可以（对动画或操作）进行快进将会很有帮助。如果正在使用 [`jest`](https://facebook.github.io/jest/) ，那么可以使用 [`mock timers`](https://facebook.github.io/jest/docs/en/timer-mocks.html) 来快进。如果正在使用 `requestAnimationFrame` 节流，那么就会发现 [`raf-stub`](https://github.com/alexreardon/raf-stub) 是一个控制动画帧的十分有用的工具。

yuqingc

Please resolve conflicts.

sichenguo added 2 commits February 25, 2019 20:52

docs(cn):add translation

1b16180

docs(cn): modify phrasing

265ddce

QC-L added the Pending Review 已翻译，待校对阶段 label Feb 25, 2019

QC-L reviewed Feb 25, 2019

View reviewed changes

QC-L mentioned this pull request Feb 25, 2019

OLD CLAIMS #4

Closed

Update faq-functions.md

5ce011c

yuqingc requested changes Apr 3, 2019

View reviewed changes

fonkie requested review from LeoEatle and jothy1023 May 10, 2019 06:49

modify the content of the document

d642b81

QC-L previously approved these changes May 24, 2019

View reviewed changes

yuqingc approved these changes May 24, 2019

View reviewed changes

yuqingc requested changes May 24, 2019

View reviewed changes

Merge branch 'master' into faq-functions

61b4ecb

QC-L dismissed their stale review via 61b4ecb May 24, 2019 12:38

yuqingc approved these changes May 24, 2019

View reviewed changes

QC-L approved these changes May 24, 2019

View reviewed changes

QC-L changed the title ~~Faq functions~~ docs(cn): translate content/docs/faq-functions.md into Chinese May 24, 2019

QC-L merged commit 37ba6bb into reactjs:master May 24, 2019

awxiaoxian2020 removed the Pending Review 已翻译，待校对阶段 label Feb 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(cn): translate content/docs/faq-functions.md into Chinese #136

docs(cn): translate content/docs/faq-functions.md into Chinese #136

sichenguo commented Feb 25, 2019

netlify bot commented Feb 25, 2019 •

edited

Loading

netlify bot commented Feb 25, 2019 •

edited

Loading

QC-L Feb 25, 2019

yuqingc Apr 3, 2019

yuqingc Apr 3, 2019

QC-L May 21, 2019

yuqingc Apr 3, 2019

yuqingc Apr 3, 2019

yuqingc Apr 3, 2019

yuqingc Apr 3, 2019

yuqingc Apr 3, 2019 •

edited by QC-L

Loading

yuqingc Apr 3, 2019

yuqingc Apr 3, 2019

yuqingc Apr 3, 2019

yuqingc left a comment •

edited

Loading


		Generally speaking, yes, it is OK, and it is often the easiest way to pass parameters to callback functions.
		一般来说是可以的，并且直接箭头函数是向回调函数传递参数的最简单的办法。

	一般来说是可以的，并且直接箭头函数是向回调函数传递参数的最简单的办法。
	一般来说是可以的，并且使用箭头函数是向回调函数传递参数的最简单的办法。


		[This post by Yehuda Katz](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) explains what binding is, and how functions work in JavaScript, in detail.
		[This post by Yehuda Katz](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) 详细解释了什么是绑定，和函数在 JavaScript 中怎么起作用。


		Make sure you aren't _calling the function_ when you pass it to the component:
		确保你没有调用函数，在你传递函数给组件时：

	确保你没有调用函数，在你传递函数给组件时：
	确保你在传递一个函数给组件时，没有调用这个函数：


		Alternately, you can use DOM APIs to store data needed for event handlers. Consider this approach if you need to optimize a large number of elements or have a render tree that relies on React.PureComponent equality checks.
		同样的，也可以使用DOM API来存储事件处理器需要的数据。如果需要优化大量元素或使用依赖于 `React.PureComponent` 相等性检查的渲染树，请考虑使用此方法。

	同样的，也可以使用DOM API来存储事件处理器需要的数据。如果需要优化大量元素或使用依赖于 `React.PureComponent` 相等性检查的渲染树，请考虑使用此方法。
	同样的，也可以使用 DOM API 来存储事件处理器需要的数据。如果需要优化大量元素或使用依赖于 `React.PureComponent` 相等性检查的渲染树，请考虑使用此方法。

	> `_.debounce` , `_.throttle` 和 `raf-schd` 都提供了一个 `cancel` 方法来取消延迟回调。所以要么调用 `componentWillUnmount`，否则需要对代码进行检查来保证在延迟函数有效期间内组件始终挂载。
	> `_.debounce`、`_.throttle` 和 `raf-schd` 都提供了一个 `cancel` 方法来取消延迟回调。你需要在 `componentWillUnmount` 中调用该方法，或者对代码进行检查来保证在延迟函数有效期间内组件始终挂载。


		Throttling prevents a function from being called more than once in a given window of time. The example below throttles a "click" handler to prevent calling it more than once per second.
		节流阻止函数在给定时间窗口内被调不能超过一次。下面这个例子会节流 “click” 事件处理器每秒钟的只能调用一次。


		[`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) is a way of queuing a function to be executed in the browser at the optimal time for rendering performance. A function that is queued with `requestAnimationFrame` will fire in the next frame. The browser will work hard to ensure that there are 60 frames per second (60 fps). However, if the browser is unable to it will naturally limit the amount of frames in a second. For example, a device might only be able to handle 30 fps and so you will only get 30 frames in that second. Using `requestAnimationFrame` for throttling is a useful technique in that it prevents you from doing more than 60 updates in a second. If you are doing 100 updates in a second this creates additional work for the browser that the user will not see anyway.
		[`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) 是在浏览器中排队等待执行的一种方法，它可以在呈现性能的最佳时间执行。一个函数被 `requestAnimationFrame` 放入队列后将会在下一帧触发。浏览器会努力确保每秒 60 帧（60fps）。然而，如果浏览器无法确保，那么自然会限制每秒的帧数。例如，某个设备可能只能处理每秒 30 帧，所以每秒只能得到 30 帧。使用 `requestAnimationFrame` 来节流是一种有用的技术，它可以防止在一秒中进行 60 帧以上的更新。如果要求一秒钟内完成100次更新，则会为浏览器创建额外的负担，而用户无法看到这些工作。

	>使用这个方法时只能获取帧中最后发布的值。也可以在 [`MDN`](https://developer.mozilla.org/en-US/docs/Web/Events/scroll) 中看优化的示例。
	>使用这个方法时只能获取某一帧中最后发布的值。也可以在 [`MDN`](https://developer.mozilla.org/en-US/docs/Web/Events/scroll) 中看优化的示例。


		When testing your rate limiting code works correctly it is helpful to have the ability to fast forward time. If you are using [`jest`](https://facebook.github.io/jest/) then you can use [`mock timers`](https://facebook.github.io/jest/docs/en/timer-mocks.html) to fast forward time. If you are using `requestAnimationFrame` throttling then you may find [`raf-stub`](https://github.com/alexreardon/raf-stub) to be a useful tool to control the ticking of animation frames.
		在测试速率限制的代码是否正确工作的时候，如果可以（对动画或操作）进行快进将会很有帮助。如果正在使用 [`jest`](https://facebook.github.io/jest/) ，那么可以使用 [`mock timers`](https://facebook.github.io/jest/docs/en/timer-mocks.html) 来快进。如果正在使用 `requestAnimationFrame` 节流，那么就会发现 [raf-stub]([`raf-stub`](https://github.com/alexreardon/raf-stub)) 是一个控制动画帧的十分有用的工具。

docs(cn): translate content/docs/faq-functions.md into Chinese #136

docs(cn): translate content/docs/faq-functions.md into Chinese #136

Conversation

sichenguo commented Feb 25, 2019

netlify bot commented Feb 25, 2019 • edited Loading

netlify bot commented Feb 25, 2019 • edited Loading

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

yuqingc Apr 3, 2019 • edited by QC-L Loading

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

yuqingc left a comment • edited Loading

Choose a reason for hiding this comment

netlify bot commented Feb 25, 2019 •

edited

Loading

netlify bot commented Feb 25, 2019 •

edited

Loading

yuqingc Apr 3, 2019 •

edited by QC-L

Loading

yuqingc left a comment •

edited

Loading