From e42ef651532f3e91ef8a6486982597f84b870e5a Mon Sep 17 00:00:00 2001 From: Jiyu Date: Mon, 18 Mar 2019 15:42:33 +0800 Subject: [PATCH] docs(cn): translate content/blog/2019-02-06-react-v16.8.0.md into Chinese --- content/blog/2019-02-06-react-v16.8.0.md | 144 +++++++++++------------ 1 file changed, 72 insertions(+), 72 deletions(-) diff --git a/content/blog/2019-02-06-react-v16.8.0.md b/content/blog/2019-02-06-react-v16.8.0.md index 3af12da7d4..a40f419ecc 100644 --- a/content/blog/2019-02-06-react-v16.8.0.md +++ b/content/blog/2019-02-06-react-v16.8.0.md @@ -1,58 +1,58 @@ --- -title: "React v16.8: The One With Hooks" +title: "React v16.8: 带有 Hooks 的版本" author: [gaearon] --- -With React 16.8, [React Hooks](/docs/hooks-intro.html) are available in a stable release! +从 React 16.8 开始，已经是带有 [React Hooks](/docs/hooks-intro.html) 的稳定发布版本啦！ -## What Are Hooks? {#what-are-hooks} +## 什么是 Hooks? {#what-are-hooks} -Hooks let you use state and other React features without writing a class. You can also **build your own Hooks** to share reusable stateful logic between components. +Hooks 允许你在不使用 class 的情况下使用 state 和 React 其他特性。你可以 **编写自定义的 Hooks** 来在不同的组件中共享有状态的逻辑。 -If you've never heard of Hooks before, you might find these resources interesting: +如果你之前从没听过 Hooks，你可能对以下资源感兴趣： -* [Introducing Hooks](/docs/hooks-intro.html) explains why we're adding Hooks to React. -* [Hooks at a Glance](/docs/hooks-overview.html) is a fast-paced overview of the built-in Hooks. -* [Building Your Own Hooks](/docs/hooks-custom.html) demonstrates code reuse with custom Hooks. -* [Making Sense of React Hooks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) explores the new possibilities unlocked by Hooks. -* [useHooks.com](https://usehooks.com/) showcases community-maintained Hooks recipes and demos. +* [Hooks 介绍](/docs/hooks-intro.html) 解释了为什么我们为 React 添加 Hooks。 +* [Hooks 一览](/docs/hooks-overview.html) 是快速的对内置 Hooks 的概览。 +* [搭建你自己的 Hooks](/docs/hooks-custom.html) 示范了如何使用自定义的 Hooks 来重用代码。 +* [React Hooks 的意义](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) 探索了被 Hooks 解锁的新可能性。 +* [useHooks.com](https://usehooks.com/) 一些社区维护的 Hooks 示例和实现。 -**You don't have to learn Hooks right now.** Hooks have no breaking changes, and we have no plans to remove classes from React. The [Hooks FAQ](/docs/hooks-faq.html) describes the gradual adoption strategy. +**你现在并不一定要学 Hooks。** Hooks 并没有突破性的改变, 并且我们并没有要删除 React class 的计划。 其中 [Hooks FAQ](/docs/hooks-faq.html) 描述了逐步采纳策略。 -## No Big Rewrites {#no-big-rewrites} +## 不需要大型重写 {#no-big-rewrites} -We don't recommend rewriting your existing applications to use Hooks overnight. Instead, try using Hooks in some of the new components, and let us know what you think. Code using Hooks will work [side by side](/docs/hooks-intro.html#gradual-adoption-strategy) with existing code using classes. +我们不建议立马重写并在你的项目中使用 Hooks。相反, 试着在一些新的组件中使用Hook，并且告诉我们你的想法。使用 Hooks 的代码可以和已经存在的使用 class 的的代码 [一起使用](/docs/hooks-intro.html#gradual-adoption-strategy)。 -## Can I Use Hooks Today? {#can-i-use-hooks-today} +## 我今天可以使用 Hooks 吗？{#can-i-use-hooks-today} -Yes! Starting with 16.8.0, React includes a stable implementation of React Hooks for: +可以！从 16.8.0 开始, React 为以下几个功能引入了 React Hooks 的稳定实现： * React DOM * React DOM Server * React Test Renderer * React Shallow Renderer -Note that **to enable Hooks, all React packages need to be 16.8.0 or higher**. Hooks won't work if you forget to update, for example, React DOM. +请注意 **为了使用 Hooks，所有的 React 包的版本需要在 16.8.0 或以上**。如果你忘记升级包的话会造成 Hooks 无法使用， 比如说忘记升级 React DOM。 -**React Native will support Hooks in the [0.59 release](https://github.com/react-native-community/react-native-releases/issues/79#issuecomment-457735214).** +**React Native 会在 [0.59 版本](https://github.com/react-native-community/react-native-releases/issues/79#issuecomment-457735214) 版本支持 Hooks。** -## Tooling Support {#tooling-support} +## 工具支持 {#tooling-support} -React Hooks are now supported by React DevTools. They are also supported in the latest Flow and TypeScript definitions for React. We strongly recommend enabling a new [lint rule called `eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) to enforce best practices with Hooks. It will soon be included into Create React App by default. +React DevTools 现在已经支持 React Hook。目前最新版的 Flow 和 TypeScript 定义也为 React 提供了支持。我们强烈建议使用新的 [`eslint-plugin-react-hooks` 提示规范](https://www.npmjs.com/package/eslint-plugin-react-hooks) 来加强对 Hooks 的使用。这个功能马上就会被加到 Create React App 的默认配置里。 -## What's Next {#whats-next} +## 下一步 {#whats-next} -We described our plan for the next months in the recently published [React Roadmap](/blog/2018/11/27/react-16-roadmap.html). +我们在最近发布的 [React 路线图](/blog/2018/11/27/react-16-roadmap.html) 里描述了下几个月的计划。 -Note that React Hooks don't cover *all* use cases for classes yet but they're [very close](/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes). Currently, only `getSnapshotBeforeUpdate()` and `componentDidCatch()` methods don't have equivalent Hooks APIs, and these lifecycles are relatively uncommon. If you want, you should be able to use Hooks in most of the new code you're writing. +请注意现在 React Hooks 还并没有覆盖*所有*的 class 使用情况，但是已经[十分接近](/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes)了。目前, 只有 `getSnapshotBeforeUpdate()` 和 `componentDidCatch()` 方法没有等价的 Hooks API, 并且这些生命周期相对来说不常用。如果你想的话，你可以在大多数的情况下使用 Hooks 来编写代码。 -Even while Hooks were in alpha, the React community created many interesting [examples](https://codesandbox.io/react-hooks) and [recipes](https://usehooks.com) using Hooks for animations, forms, subscriptions, integrating with other libraries, and so on. We're excited about Hooks because they make code reuse easier, helping you write your components in a simpler way and make great user experiences. We can't wait to see what you'll create next! +尽管在 Hooks 处于 alpha 测试阶段的时候，React 社区已经开发了很多有趣的 [示例](https://codesandbox.io/react-hooks) 和 [方法](https://usehooks.com) 来使用 Hooks 开发动画、表单、订阅、和其他库结合使用等等。我们对 Hooks 把代码重用变得简单、帮助你用一种更简单的方式来编写你的组件、并且有着更好的用户体验这件事上感到非常的激动。我们已经迫不及待的想看到你将要创造出什么了！ -## Testing Hooks {#testing-hooks} +## 测试 Hooks {#testing-hooks} -We have added a new API called `ReactTestUtils.act()` in this release. It ensures that the behavior in your tests matches what happens in the browser more closely. We recommend to wrap any code rendering and triggering updates to your components into `act()` calls. Testing libraries can also wrap their APIs with it (for example, [`react-testing-library`](https://github.com/kentcdodds/react-testing-library)'s `render` and `fireEvent` utilities do this). +我们在这次发布中已经添加了一个新的叫 `ReactTestUtils.act()` 的 API。它保证了在测试中的表现会与在浏览器中的行为会非常的接近。我们建议把所有渲染和触发更新的代码用 `act()` 方法包起来。 测试框架也可以把他们的 API 用它包起来（例如，[`react-testing-library`](https://github.com/kentcdodds/react-testing-library) 的 `render` 和 `fireEvent` 方法可以这么做）。 -For example, the counter example from [this page](/docs/hooks-effect.html) can be tested like this: +例如，在[这个页面](/docs/hooks-effect.html)的计时器的例子可以用这样的方法来测试： ```js{3,20-22,29-31} import React from 'react'; @@ -73,7 +73,7 @@ afterEach(() => { }); it('can render and update a counter', () => { - // Test first render and effect + // 测试第一次渲染和影响 act(() => { ReactDOM.render(, container); }); @@ -82,7 +82,7 @@ it('can render and update a counter', () => { expect(label.textContent).toBe('You clicked 0 times'); expect(document.title).toBe('You clicked 0 times'); - // Test second render and effect + // 测试第二次渲染和影响 act(() => { button.dispatchEvent(new MouseEvent('click', {bubbles: true})); }); @@ -91,52 +91,52 @@ it('can render and update a counter', () => { }); ``` -The calls to `act()` will also flush the effects inside of them. +`act()` 所调用的方法也会刷新它们内部所产生的影响。 -If you need to test a custom Hook, you can do so by creating a component in your test, and using your Hook from it. Then you can test the component you wrote. +如果你需要测试一个自定义的 Hook，你可以在你的测试里写一个组件，然后在里面使用 Hook。然后你就可以测试你写的组件了。 -To reduce the boilerplate, we recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to encourage writing tests that use your components as the end users do. +为了减少样板代码，我们建议使用 [`react-testing-library`](https://git.io/react-testing-library)，它鼓励你像终端用户一样写你的测试代码。 -## Thanks {#thanks} +## 谢谢 {#thanks} -We'd like to thank everybody who commented on the [Hooks RFC](https://github.com/reactjs/rfcs/pull/68) for sharing their feedback. We've read all of your comments and made some adjustments to the final API based on them. +我们非常感谢所有在 [Hooks RFC](https://github.com/reactjs/rfcs/pull/68) 上发布并分享反馈的用户。我们已经阅读了你们所有的评论并且依此给我们最终的 API 做了一些调整。 -## Installation {#installation} +## 安装 {#installation} ### React {#react} -React v16.8.0 is available on the npm registry. +React v16.8.0 已经在 npm 上发布。 -To install React 16 with Yarn, run: +使用 Yarn 来安装 React 16，运行： ```bash yarn add react@^16.8.0 react-dom@^16.8.0 ``` -To install React 16 with npm, run: +使用 npm 来安装 React 16，运行： ```bash npm install --save react@^16.8.0 react-dom@^16.8.0 ``` -We also provide UMD builds of React via a CDN: +我们也在 CDN 上提供了 React 的 UMD 打包： ```html ``` -Refer to the documentation for [detailed installation instructions](/docs/installation.html). +请参考文档的[详细安装指南](/docs/installation.html). -### ESLint Plugin for React Hooks {#eslint-plugin-for-react-hooks} +### React Hooks 的 ESLint 插件 {#eslint-plugin-for-react-hooks} ->Note +>注意 > ->As mentioned above, we strongly recommend using the `eslint-plugin-react-hooks` lint rule. +>就像上面提到的，我们强烈建议使用 `eslint-plugin-react-hooks` 提示规范。 > ->If you're using Create React App, instead of manually configuring ESLint you can wait for the next version of `react-scripts` which will come out shortly and will include this rule. +>如果你正在使用 Create React App，与其说手动配置 ESLint，你可以等待马上发版并且包括这个提示规范的下个版本的`react-scripts`。 -Assuming you already have ESLint installed, run: +假设你已经安装了 ESLint，运行： ```sh # npm @@ -146,7 +146,7 @@ npm install eslint-plugin-react-hooks@next --save-dev yarn add eslint-plugin-react-hooks@next --dev ``` -Then add it to your ESLint configuration: +然后把它加到你的 ESLint 配置里： ```js { @@ -161,47 +161,47 @@ Then add it to your ESLint configuration: } ``` -## Changelog {#changelog} +## 更新日志 {#changelog} ### React {#react-1} -* Add [Hooks](https://reactjs.org/docs/hooks-intro.html) — a way to use state and other React features without writing a class. ([@acdlite](https://github.com/acdlite) et al. in [#13968](https://github.com/facebook/react/pull/13968)) -* Improve the `useReducer` Hook lazy initialization API. ([@acdlite](https://github.com/acdlite) in [#14723](https://github.com/facebook/react/pull/14723)) +* 添加 [Hooks](https://reactjs.org/docs/hooks-intro.html) — 一个不用编写 class 就能使用 state 和其他 React 特性的方法。 ([@acdlite](https://github.com/acdlite) et al. in [#13968](https://github.com/facebook/react/pull/13968)) +* 改善 `useReducer` Hooks 懒初始化 API。([@acdlite](https://github.com/acdlite) in [#14723](https://github.com/facebook/react/pull/14723)) ### React DOM {#react-dom} -* Bail out of rendering on identical values for `useState` and `useReducer` Hooks. ([@acdlite](https://github.com/acdlite) in [#14569](https://github.com/facebook/react/pull/14569)) -* Don’t compare the first argument passed to `useEffect`/`useMemo`/`useCallback` Hooks. ([@acdlite](https://github.com/acdlite) in [#14594](https://github.com/facebook/react/pull/14594)) -* Use `Object.is` algorithm for comparing `useState` and `useReducer` values. ([@Jessidhia](https://github.com/Jessidhia) in [#14752](https://github.com/facebook/react/pull/14752)) -* Support synchronous thenables passed to `React.lazy()`. ([@gaearon](https://github.com/gaearon) in [#14626](https://github.com/facebook/react/pull/14626)) -* Render components with Hooks twice in Strict Mode (DEV-only) to match class behavior. ([@gaearon](https://github.com/gaearon) in [#14654](https://github.com/facebook/react/pull/14654)) -* Warn about mismatching Hook order in development. ([@threepointone](https://github.com/threepointone) in [#14585](https://github.com/facebook/react/pull/14585) and [@acdlite](https://github.com/acdlite) in [#14591](https://github.com/facebook/react/pull/14591)) -* Effect clean-up functions must return either `undefined` or a function. All other values, including `null`, are not allowed. [@acdlite](https://github.com/acdlite) in [#14119](https://github.com/facebook/react/pull/14119) +* 优化 `useState` 和 `useReducer` 在同等值下的渲染Hooks。([@acdlite](https://github.com/acdlite) in [#14569](https://github.com/facebook/react/pull/14569)) +* 不要比较传给 `useEffect`/`useMemo`/`useCallback` Hooks 的第一个参数。([@acdlite](https://github.com/acdlite) in [#14594](https://github.com/facebook/react/pull/14594)) +* 使用 `Object.is` 算法来比较 `useState` 和 `useReducer` 的值。([@Jessidhia](https://github.com/Jessidhia) in [#14752](https://github.com/facebook/react/pull/14752)) +* 支持传给 `React.lazy()` 同步的 thenable 对象。([@gaearon](https://github.com/gaearon) in [#14626](https://github.com/facebook/react/pull/14626)) +* 严格模式（只有在开发的时候）渲染使用 Hooks 的组件两次使其和 class 的表现一样。([@gaearon](https://github.com/gaearon) in [#14654](https://github.com/facebook/react/pull/14654)) +* 在开发的时候 Hooks 顺序匹配错误的警告。([@threepointone](https://github.com/threepointone) in [#14585](https://github.com/facebook/react/pull/14585) and [@acdlite](https://github.com/acdlite) in [#14591](https://github.com/facebook/react/pull/14591)) +* Effect clean-up 方法必须返回 `undefined` 或者一个方法。其他的值，包括 `null`，都不被允许。 [@acdlite](https://github.com/acdlite) in [#14119](https://github.com/facebook/react/pull/14119) ### React Test Renderer {#react-test-renderer} -* Support Hooks in the shallow renderer. ([@trueadm](https://github.com/trueadm) in [#14567](https://github.com/facebook/react/pull/14567)) -* Fix wrong state in `shouldComponentUpdate` in the presence of `getDerivedStateFromProps` for Shallow Renderer. ([@chenesan](https://github.com/chenesan) in [#14613](https://github.com/facebook/react/pull/14613)) -* Add `ReactTestRenderer.act()` and `ReactTestUtils.act()` for batching updates so that tests more closely match real behavior. ([@threepointone](https://github.com/threepointone) in [#14744](https://github.com/facebook/react/pull/14744)) +* 在浅层渲染中支持 Hooks。([@trueadm](https://github.com/trueadm) in [#14567](https://github.com/facebook/react/pull/14567)) +* 为浅层渲染修复与 `shouldComponentUpdate` 和 `getDerivedStateFromProps` 共同的 state。([@chenesan](https://github.com/chenesan) in [#14613](https://github.com/facebook/react/pull/14613)) +* 为批量更新添加 `ReactTestRenderer.act()` 和 `ReactTestUtils.act()` 方法，因此测试可以和真实的行为变得更加相符。([@threepointone](https://github.com/threepointone) in [#14744](https://github.com/facebook/react/pull/14744)) ### ESLint Plugin: React Hooks {#eslint-plugin-react-hooks} -* Initial [release](https://www.npmjs.com/package/eslint-plugin-react-hooks). ([@calebmer](https://github.com/calebmer) in [#13968](https://github.com/facebook/react/pull/13968)) -* Fix reporting after encountering a loop. ([@calebmer](https://github.com/calebmer) and [@Yurickh](https://github.com/Yurickh) in [#14661](https://github.com/facebook/react/pull/14661)) -* Don't consider throwing to be a rule violation. ([@sophiebits](https://github.com/sophiebits) in [#14040](https://github.com/facebook/react/pull/14040)) +* 初次 [筏板](https://www.npmjs.com/package/eslint-plugin-react-hooks). ([@calebmer](https://github.com/calebmer) in [#13968](https://github.com/facebook/react/pull/13968)) +* 修复在进入循环后的报告。([@calebmer](https://github.com/calebmer) and [@Yurickh](https://github.com/Yurickh) in [#14661](https://github.com/facebook/react/pull/14661)) +* 不要考虑抛出异常和规范的冲突。([@sophiebits](https://github.com/sophiebits) in [#14040](https://github.com/facebook/react/pull/14040)) -## Hooks Changelog Since Alpha Versions {#hooks-changelog-since-alpha-versions} +## 在 alpha 版本后的 Hooks 的更新日志。{#hooks-changelog-since-alpha-versions} -The above changelog contains all notable changes since our last **stable** release (16.7.0). [As with all our minor releases](/docs/faq-versioning.html), none of the changes break backwards compatibility. +上面的更新日志包括所有自上一个**稳定**版本（16.7.0）后的显著的更改。 [和我们每次的小发版一样](/docs/faq-versioning.html)，没有一个更改打破了向后兼容。 -If you're currently using Hooks from an alpha build of React, note that this release does contain some small breaking changes to Hooks. **We don't recommend depending on alphas in production code.** We publish them so we can make changes in response to community feedback before the API is stable. +如果你正在使用基于 alpha Hooks 的 React 版本，请注意这次发版的确包括一些小的 Hooks 更改。**我们不建议正式版本代码基于 alpha 代码**。我们发布它们是为了在 API 稳定之前在社区反馈的基础上做一些更改。 -Here are all breaking changes to Hooks that have been made since the first alpha release: +这里是在 alpha 版本后所有的对 Hooks 做的显著更改： -* Remove `useMutationEffect`. ([@sophiebits](https://github.com/sophiebits) in [#14336](https://github.com/facebook/react/pull/14336)) -* Rename `useImperativeMethods` to `useImperativeHandle`. ([@threepointone](https://github.com/threepointone) in [#14565](https://github.com/facebook/react/pull/14565)) -* Bail out of rendering on identical values for `useState` and `useReducer` Hooks. ([@acdlite](https://github.com/acdlite) in [#14569](https://github.com/facebook/react/pull/14569)) -* Don’t compare the first argument passed to `useEffect`/`useMemo`/`useCallback` Hooks. ([@acdlite](https://github.com/acdlite) in [#14594](https://github.com/facebook/react/pull/14594)) -* Use `Object.is` algorithm for comparing `useState` and `useReducer` values. ([@Jessidhia](https://github.com/Jessidhia) in [#14752](https://github.com/facebook/react/pull/14752)) -* Render components with Hooks twice in Strict Mode (DEV-only). ([@gaearon](https://github.com/gaearon) in [#14654](https://github.com/facebook/react/pull/14654)) -* Improve the `useReducer` Hook lazy initialization API. ([@acdlite](https://github.com/acdlite) in [#14723](https://github.com/facebook/react/pull/14723)) +* 删除 `useMutationEffect`. ([@sophiebits](https://github.com/sophiebits) in [#14336](https://github.com/facebook/react/pull/14336)) +* 重命名 `useImperativeMethods` 至 `useImperativeHandle`. ([@threepointone](https://github.com/threepointone) in [#14565](https://github.com/facebook/react/pull/14565)) +* 优化 `useState` 和 `useReducer` 在同等值下的渲染Hook。([@acdlite](https://github.com/acdlite) in [#14569](https://github.com/facebook/react/pull/14569)) +* 不要比较传给 `useEffect`/`useMemo`/`useCallback` Hooks 的第一个参数。 ([@acdlite](https://github.com/acdlite) in [#14594](https://github.com/facebook/react/pull/14594)) +* 使用 `Object.is` 算法来比较 `useState` 和 `useReducer` 的值。 ([@Jessidhia](https://github.com/Jessidhia) in [#14752](https://github.com/facebook/react/pull/14752)) +* 严格模式（只有在开发的时候）渲染使用 Hooks 的组件两次使其和 class 的表现一样。 ([@gaearon](https://github.com/gaearon) in [#14654](https://github.com/facebook/react/pull/14654)) +* 改善 `useReducer` Hooks 懒初始化 API。([@acdlite](https://github.com/acdlite) in [#14723](https://github.com/facebook/react/pull/14723)) \ No newline at end of file