React 16.8 版本: 带 Hooks 的版本

简介: Hooks 允许你在不编写 class 的情况下使用状态(state)和其他 React 特性。 你还可以构建自己的 Hooks, 跨组件共享可重用的有状态逻辑。

原文作者:Dan Abramov

译者:UC 国际研发 Jothy

写在最前:欢迎你来到“UC国际技术”公众号,我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章,不限于原创与翻译。

编者按:英文原文带有大量外链,由于微信的限制不能很好展示,您可选择「阅读原文」获得更好的阅读体验。:-)

随着 React 发布 16.8 版本,React Hooks 也发布稳定版本啦!

什么是 Hooks?
Hooks 允许你在不编写 class 的情况下使用状态(state)和其他 React 特性。 你还可以构建自己的 Hooks, 跨组件共享可重用的有状态逻辑。

如果你以前从未听说过 Hooks, 你可能会觉得这些资源很有趣:

  • Hooks 介绍 解释了我们给 React 添加 Hooks 的原因。
  • Hooks 概览 是对内置 Hooks 的快速概述。
  • 构建自己的 Hooks 演示了如何使用自定义 Hooks 重用代码。
  • 理解 React Hooks 探索了那些被 Hooks 解锁的新的可能。
  • useHooks.com 展示了由社区维护的 Hooks 用法和 demos.

你不必现在就学习 Hooks. Hooks 没有重大变化,我们不计划从 React 中移除 class. Hooks FAQ 描述了我们逐步采纳的策略。

无重大重写
我们不建议你为了马上应用 Hooks 而重写现有应用。相反,我们建议你尝试在一些新的组件中使用 Hooks, 并且让我们了解你的想法。 使用 Hooks 的代码将与使用 class 的现有代码并行工作。

我现在可以用 Hooks 了吗?
可以的! 从 16.8.0 版本开始,React 包含一个稳定的 React Hooks 实现,可用于:

  • React DOM
  • React DOM 服务器(Server)
  • React 测试渲染器(Test Renderer)
  • React 浅层渲染器(Shallow Renderer)

请注意,要启用 Hooks, 所有 React 包都必须升级到 16.8.0 或更高版本。 如果你忘记更新诸如 React DOM 之类的包,Hooks 将无法运行。

React Native 将在 0.59 版本 支持 Hooks.

工具支持
React DevTools 现已支持 React Hooks, React 最新的 Flow 和 TypeScript 定义也支持它们。我们强烈建议你启用名为 eslint-plugin-react-hooks 的新 lint 规则来强制执行 Hooks 的最佳实践。Create React App 将很快包含它。

规划
我们在最近发布的 React 路线图中描述了我们未来几个月的计划。

请注意,React Hooks 尚未涵盖所有 class 的用例,但已经很接近了。 目前,只有 getSnapshotBeforeUpdate() 和 componentDidCatch() 方法没有等价的 Hooks API, 且这些生命周期相对不常见。 如果你想用 Hooks, 你可以在你正在写的大部分新代码中使用它。

即使仍处于 alpha 状态,React 社区也使用 Hooks 为动画(animations),表单(forms),订阅(subscriptions),与其他库的集成(integrating)等创建了许多有趣的示例和用法。 我们为 Hooks 而雀跃 ,因为它们使代码更易重用,帮助你以更简单的方式编写组件,创建绝佳的用户体验。 我们迫不及待想知道你接下来会创造什么!

测试 Hooks
我们在这个版本中添加了一个名为 ReactTestUtils.act() 的新 API. 它可确保测试的行为与浏览器中的行为更加匹配。我们建议将所有代码渲染和组件更新触发封装到 act() 调用中。测试库也可以用它封装 API(举个例子,react-testing-library 的 render 和 fireEvent 工具就是这样做的)。

例如,此页面中的计数器示例可以这样进行测试:

image.png

对 act() 的调用也会刷新它们内部的 effects.

如果你需要测试自定义 Hook, 你可以在测试时创建组件,并使用它的 Hook. 然后就可以测试你写的组件了。

为了减少重复样板,我们建议使用 react-testing-library, 它鼓励程序员编写模拟用户使用组件的行为的测试。

致谢
我们想向所有在 Hooks RFC 中分享反馈意见的人致谢。 我们已经阅读了你们的所有评论,并根据它们对最终 API 进行了一些调整。

安装
React {#react}
React 16.8.0 版本已发布到 NPM 注册表。

使用 Yarn 安装 React 16, 请运行:

image.png

使用 NPM 安装 React 16, 请运行:

image.png

我们还通过 CDN 提供 React 的 UMD 构建版本:

image.png

详情请访问详细的安装。

React Hooks 的 ESLint 插件
注意

综上所述,我们强烈建议你使用 eslint-plugin-react-hooks lint 规则。
如果你正在使用 Create React App, 而不是手动配置 ESLint,你可以等待下一版本的 react-scripts, 届时将包含此规则。

假设你已经安装了 ESLint, 请运行:

image.png

然后添加以下 ESLint 配置:

image.png

更新日志
React {#react-1}

  • 新增 Hooks —— 一种在不编写 class 的情况下使用状态(state)和其他 React 特性的方法。(@acdlite 等人提出于 #13968)
  • 改进 useReducer Hook 延迟初始化 API. (@acdlite 提出于 #14723)

React DOM {#react-dom}

  • 避免为 useState 和 useReducer Hooks 传入相同值时进行的渲染。 (@acdlite 提出于 #14569)
  • 不比较传递给 useEffect/useMemo/useCallback Hooks 的第一个参数。 (@gaearon 提出于 #14654)
  • 使用 Object.is 算法比较 useState 和 useReducer 的值。 (@Jessidhia 提出于 #14752)
  • 支持传递给 React.lazy() 的同步 thenable. (@gaearon 提出于 #14626)
  • 在严格模式(仅限 DEV)中使用 Hooks 两次渲染组件以匹配 class 行为。 (@gaearon 提出于 #14654)
  • 在开发模式中 Hook 顺序不匹配时警告。 (@threepointone 提出于 #14585 及 @acdlite 提出于 #14591)

Effect 清理功能必须返回 undefined 或函数。不允许包含 null 在内的其他所有值。(@acdlite 提出于 #14119)

React 测试渲染器

  • 支持浅层渲染器中的 Hooks. (@trueadm 提出于 #14567)
  • 在浅层渲染器中存在 getDerivedStateFromProps 的情况下,修复 shouldComponentUpdate 中的错误状态。 (@chenesan 提出于 #14613)
  • 添加 ReactTestRenderer.act() 和 ReactTestUtils.act() 以进行批处理更新,以便测试更接近真实行为。 (@threepointone 提出于 #14744)

ESLint 插件: React Hooks {#eslint-plugin-react-hooks}

  • 首次发布。 (@calebmer 提出于 #13968)
  • 修复循环后的报告。 (@calebmer 及 @Yurickh 提出于 #14661)
  • 不要把错误的抛出当作违反规则。 (@sophiebits 提出于 #14040)

Hooks 自 Alpha 版本之后的更新日志 {#hooks-changelog-since-alpha-versions}
上述更改日志包含自上次稳定版本(16.7.0)以来的所有重要更改。 与我们的所有 minor 版本一样,这些更改都不会破坏向后兼容性。

如果你正在使用来自 React alpha 版本的 Hooks, 请注意此版本确实包含对 Hooks 的一些小的重大更改。 我们不建议在生产代码中依赖 alpha. 我们发布它们是为了在 API 稳定之前根据的社区反馈进行更改。

以下是自第一个 alpha 版本发布以来,我们对 Hooks 所做的所有重大更改:

  • 删除 useMutationEffect. (@sophiebits 提出于 #14336)
  • 将 useImperativeMethods 重命名为 useImperativeHandle. (@threepointone 提出于 #14565)
  • 避免为 useState 和 useReducer Hooks 传入相同值时进行的渲染。 (@acdlite 提出于 #14569)
  • 不比较传递给 useEffect/useMemo/useCallback Hooks 的第一个参数。 (@gaearon 提出于 #14654)
  • 使用 Object.is 算法比较 useState 和 useReducer 的值。 (@Jessidhia 提出于 #14752)
  • 在严格模式下仅使用 Hooks 两次渲染组件(仅限 DEV)。 (@gaearon 提出于 #14654)
  • 改进 useReducer Hook 延迟初始化 API. (@acdlite 提出于 #14723)
目录
相关文章
|
2月前
|
前端开发 JavaScript
React Hooks 全面解析
【10月更文挑战第11天】React Hooks 是 React 16.8 引入的新特性,允许在函数组件中使用状态和其他 React 特性,简化了状态管理和生命周期管理。本文从基础概念入手,详细介绍了 `useState` 和 `useEffect` 的用法,探讨了常见问题和易错点,并提供了代码示例。通过学习本文,你将更好地理解和使用 Hooks,提升开发效率。
70 4
|
2月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
20天前
|
前端开发 JavaScript
深入探索React Hooks:从useState到useEffect
深入探索React Hooks:从useState到useEffect
|
1月前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
32 2
|
2月前
|
前端开发 开发者
React 提供的其他重要 Hooks
【10月更文挑战第20天】React 提供了一系列强大的 Hooks,除了 `useRef` 之外,还有许多其他重要的 Hooks,它们共同构成了函数式组件开发的基础。
35 6
|
12天前
|
缓存 前端开发 开发者
深入理解React Hooks,打造高效响应式UI
深入理解React Hooks,打造高效响应式UI
23 0
|
2月前
|
前端开发 JavaScript 开发者
React Hooks
10月更文挑战第13天
36 1
|
2月前
|
前端开发 开发者 UED
React 18 与之前版本的主要区别
【10月更文挑战第12天】 总的来说,React 18 的这些区别体现了 React 团队对于提升应用性能、用户体验和开发效率的持续努力。开发者需要适应这些变化,充分利用新特性来构建更出色的应用。同时,随着技术的不断发展,React 也将继续演进,为开发者带来更多的创新和便利。
|
2月前
|
前端开发
|
2月前
|
前端开发 JavaScript API
自定义React Hooks综合指南
本文介绍了React Hooks及其在组件开发中的作用,重点讲解了自定义Hook的创建和使用方法。通过实例展示了如何创建`useWindowWidth`、`useFetch`和`useForm`等自定义Hook,并分享了使用自定义Hook的最佳实践。文章强调了自定义Hook在提高代码复用性和组件可维护性方面的重要性。
62 0