React Hooks 文档翻译 - 1 - Introducing Hooks(Hooks 介绍)

目录

  1. 1. Video Introduction(介绍视频)
  2. 2. No Breaking Changes(非重大的更改)
  3. 3. Motivation(动机)
    1. 3.1. It’s hard to reuse stateful logic between components
    2. 3.2. Complex components become hard to understand
    3. 3.3. Classes confuse both people and machines
  4. 4. Gradual Adoption Strategy
  5. 5. Frequently Asked Questions
  6. 6. Next Steps

翻译自:https://reactjs.org/docs/hooks-intro.html

Hooks 是 React 16.8 新增的功能。它允许你在不编写类的情况下使用状态和其他 React 特性。

import { useState } from 'react';

function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

新函数 useState 就是我们要学习的第一个“Hook”。如果对它还没有概念,不必担心,这个例子只是一个预告!

你可以在下一节 学习Hooks。 本文将接着解释为什么我们将 Hooks 添加到 React 中,以及它们如何帮助你编写出色的应用程序。

注意

React 16.8.0 是第一个支持 Hooks 的版本。升级时,不要忘记更新所有包,包括 React DOM。React Native 将在下一个稳定版本中支持 Hooks。

Video Introduction(介绍视频)

在 React Conf 2018 ,Sophie Alpert 和 Dan Abramov 介绍了 Hooks,随后 Ryan Florence 演示了如何重构应用程序来使用它们。
观看视频:(需要科学上网工具,且未翻译)

No Breaking Changes(非重大的更改)

在继续了解前,需要了解关于 Hooks 的以下几点:

  • 完全可选的。你可以在几个新的组件中尝试 Hooks,而无需重写任何现有代码。如果你现在不愿意尝试它,完全不必去学习或使用它。
  • 100%向后兼容。 Hooks 不包含任何其它的重大更改。
  • 现在可用。 随着 v16.8.0 的发布,现在可以使用 Hooks。

没有任何从 React 中删除类的计划。 你可以在本页底部阅读有关 Hooks 逐步采用策略的更多信息。

Hooks 不会取代你对React概念的了解。 相反,Hooks 为你已经知道的 React 概念:props,state,context,refs 和 lifecycle 提供了更直接的API。正如我们稍后将展示的,Hooks 还提供了一种新的强大方式来组合它们。

如果你想立即开始学习Hooks,请直接跳到下一页! 你还可以继续阅读此页面,进一步了解我们为什么要添加Hooks,以及我们如何在不重写应用程序的情况下开始使用它们。

Motivation(动机)

Hook 解决了过去五年里我们使用 React 编写和维护数以万计的组件时遇到的很多看似无关的问题,但无论你是在学习 React,还是在使用它,或者是更喜欢使用具有类似组件模型的不同库,你可能会遇到其中的一些问题。

It’s hard to reuse stateful logic between components

在组件间公用状态的逻辑很困难

React 没有提供能将可重用行为“附加”到组件的方法(例如,将其连接到一个 store 上)。如果你已经使用了一段时间 React ,你可能熟悉render props高阶组件 等模式,这些模式都试图解决这样的问题。但是这些模式要求你在使用它们时重构组件,这可能会很麻烦并且使代码更难以追踪。如果你从 React DevTools 中查看一个典型的 React 应用程序,你可能会发现一个由多层“生产者”、“消费者”、“高阶组件”、“渲染 props” 和其他抽象层的组件组成的“包装器地狱”。虽然我们可以在 DevTools 中过滤它们,但这指出了一个更深层次的基本问题:React需要提供一个更好的原生的方法来共享状态的逻辑。

使用 Hooks,你可以从组件中提取状态的逻辑,以便可以独立测试并重用。Hooks 允许你在不更改组件层次结构的情况下重用有状态逻辑。这样可以轻松地在许多组件之间或社区间共享 Hooks。

我们将在构建你自己的 Hooks 中进一步讨论。

Complex components become hard to understand

复杂的组件变得很难理解

我们经常需要维护一些开始时很简单,最后演变成了有一堆无法管理的状态逻辑和副作用的混乱的组件。组件的每个生命周期方法通常是一些不相关逻辑的混合。例如,组件可能会在 componentDidMountcomponentDidUpdate 中执行一些数据获取的行为。但是,同一个 componentDidMount 方法可能还包含一些设置事件侦听器的无关逻辑,并在 componentWillUnmount 中被清理。相互关联的一起产生作用的代码被拆分,而完全不相关的代码最终被组合在一个方法中,这使得错误和不一致的引入变得太容易了。

在许多情况下,将这些组件拆分为较小的组件是不可能的,因为状态的逻辑遍布整个组件,而且测试它们也很困难。这就是许多人更喜欢将 React 与单独的状态管理库相结合的原因之一。然而,这样做通常会引入很多的抽象,要求你在不同的文件之间跳转,并使重用组件变得更加困难。

为了解决这个问题,Hooks 允许你根据相关联的部分(例如监听订阅或获取数据)将一个组件拆分为几个较小的函数,,而不是基于生命周期方法将这些相关联的部分强制拆分。你还可以选择使用 reducer 来管理组件的内部状态,以使其更具可预测性。

我们将在使用 Effect Hook 中更多地讨论这个问题。

Classes confuse both people and machines

“类”让人和机器都很困惑

我们发现“类”除了使代码重用和代码组织更加困难之外,还可能是学习 React 的一大障碍。你必须了解 this 在 JavaScript 中是如何工作的,这与它在大多数语言中的工作方式有很大不同。你必须记住绑定事件处理程序。没有稳定的语法提议,代码非常冗长。人们可以很好地理解 props,state 和自上而下的数据流,但是在艰难地与“类”做斗争。React 中的函数和类组件之间的区别以及何时使用它们,导致即使经验丰富的 React 开发人员之间也存在分歧。

此外,React 已经推出了大约五年了,我们希望确保它在未来五年内保持活跃。正如 SvelteAngularGlimmer 和其他类库所表现的,预编译型组件 具有很大的未来潜力。特别是如果它不限于模板。最近,我们一直在尝试使用 Prepack 进行组件打包,我们已经看到了有希望的早期结果。但是,我们发现类组件可能会产生无意识的模式,导致这些优化回归到较慢的路径。类组件也为今天的工具提出了问题。例如,类不会很好地压缩,并且它们使得热更新加载更加碎片化和不可靠。我们希望提供一种API,使代码更有可能保持在可优化的道路上。

为了解决这些问题,Hooks 允许你在没有类的情况下使用更多 React 的特性。 从概念上讲,React组件一直更接近函数。Hooks 拥抱函数,但不会牺牲 React 的实际精神。Hooks 提供了对命令式方式编程的访问,并且不需要你学习复杂的函数式或响应式编程技术。

Examples

Hooks 概览是开始学习 Hooks 的好地方。

Gradual Adoption Strategy

逐步采用的策略

太长不看版:没有从 React 中移除类组件的计划

我们知道 React 开发人员专注于发布产品,未必有时间研究每次发布中的新 API。 Hooks 是非常新的,在考虑学习或采用它们之前等待更多示例和教程可能会更好。

你可能听说过为 React 添加新语法的标准非常高。对于好奇的读者,我们已经准备了一个详细的RFC,其中包含更多此动机的细节,并提供有关特定设计决策和相关现有技术的额外视角。

至关重要的是,Hooks 与现有代码并行工作,因此你可以逐步采用它们。 不必急于迁移到 Hooks。我们建议避免任何的“重大改写”,特别是对于现有的复杂类组件。开始“使用 Hooks 思考”需要一点精神上的转变。根据我们的经验,最好先在新的和非关键的组件中练习使用 Hooks,并确保团队中的每个人都对它感到适应。在你尝试 Hooks之后,请随时向我们发送反馈,无论是积极的还是消极的。

我们打算让 Hooks 涵盖所有的现有的类用例,但我们将在可预见的未来继续支持类组件。 在Facebook,我们有数万个组件都是使用类编写的,我们绝对没有计划重写它们。相反,我们开始在新代码中使用 Hooks 与类并排使用。

Frequently Asked Questions

我们准备了一个 Hooks FAQ 页面,它回答了关于 Hooks 最常见的问题

Next Steps

在本文末尾,你应该大致了解 Hooks 正在解决的问题,但可能很多细节都不清楚。别担心!让我们进入下一页 通过示例开始学习 Hooks。

知识共享许可协议 知识共享许可协议 知识共享许可协议 本网站原创内容(非转载文章)采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。