Hooks概览(译)

Hooks是React v16.7.0-alpha中加入的新特性。它可以让你在class以外使用state和其他React特性。你可以在这里看到关于它的一些讨论。

Hooks 向后兼容。本页向有经验的 React 用户提供 Hooks 的概览。

这是一个快节奏的概览。如果你感到困惑,请在以下方框中获取更多相关内容:

详细解释 阅读动机以了解我们为何将Hooks引入React

每个部分都以上面这样的方框结束。它们链接到详细的解释。

State Hook

以下示例渲染一个计数器。点击按钮,数值递增:

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(稍后将会讨论它的含义)。在函数组件中调用useState来向它添加一些本地state。React将在重新渲染之间保留此状态。useState返回一对值:当前 state 值和一个用于更新这个值的函数。可以在事件处理程序或者其它地方调用这个函数。它类似于类中的this.setState。不同的是它不能将旧的state和新的state合并在一起。(我们将提供一个示例,用State Hook对useState和this.state进行比较。)

useState的唯一参数用于初始化state。在上面的例子中,这个初始值是0,因为计数器从0开始。请注意,与this.state不同的是,此处的state 不必是对象——尽管它支持对象类型。这个初始化state的参数仅在第一次渲染被使用。

声明多个state变量

可以在单个组件中多次使用State Hook:

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

数组解构语法允许我们在调用useState时将声明的state变量赋予不同的名称。这些名称不是useState API的一部分。相反,React假定如果多次调用useState,则在每次渲染时以相同的顺序执行。 我们稍后将讨论为什么这种方法可行以及何时有用。

Hook是什么?

Hooks是一个“钩住”React state和生命周期特性的函数组件。Hooks在类中不起作用——它们让你在没有类的情况下使用React。(不建议一夜之间重写现有组件,但如果你愿意,可以开始在新组件中使用 Hooks。)

React提供了一些像useState这样的内置Hook。你还可以创建自己的Hook以复用不同组件之间的状态行为。我们先来看看内置的Hooks。

详细解释 你可以在专属页上了解有关State Hook的更多信息:使用State Hook

Effect Hook

你之前可能从React组件执行过数据获取、订阅或手动更改DOM。我们将这些操作称为“副作用”(或简称为“影响”)(side effects),因为它们会影响其他组件,并且在渲染过程中无法完成。

Effect Hook、useEffect增加了从功能组件执行副作用的功能。它与React类中的componentDidMount,componentDidUpdate和componentWillUnmount具有相同的用途,但统一为单个API。(我们将在使用Effect Hook中提供示例,将useEffect和这些方法进行比较。)

例如,组件在React更新DOM之后设置文档标题:

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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

 当调用useEffect时,React被告知在刷新对DOM的更改后运行“影响”(effect)函数。Effects函数在组件内被声明,因此可以访问其props和state。默认情况下,React在每次渲染后都运行effects函数——包括第一次渲染。 (我们将在使用Effect Hook章节中更多地讨论这与类中的生命周期的比较。)

Effects还可以通过返回函数指定如何“清理”它们。例如,一个组件使用 effect来订阅朋友的在线状态,并通过取消订阅来清理它:

import { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);

    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

在此例中,当组件卸载,以及由于后续渲染而重新运行这个effect之前,React将从ChatAPI取消订阅。(如果传递到ChatAPI的props.friend.id没有改变,有一种方法可以让 React跳过重新订阅。)

Hooks允许通过那些相关的部分(例如添加和删除订阅)来组织组件中的副作用(side effects),而不是基于生命周期方法强制拆分。

详细解释 你可以在专属页上了解有关useEffect的更多信息:使用Effect Hook

Hooks 规范

Hooks是JavaScript函数,但它们强加了两个额外的规则:

  • 只能在函数的顶层调用Hooks。不要在循环、条件或嵌套函数中调用Hook。
  • 只能在React的函数组件中调用Hooks,不能在常规JavaScript函数调用。(还有另一个调用Hooks的有效方式:自定义Hooks。稍后将会介绍它们。)

我们提供了一个linter插件来自动执行这些规则。这些规则最初可能看起来是一种限制或令人困惑,但它们对于使Hooks运行良好必不可少。

详细解释 你可以在专属页上了解有关规范的更多信息:Hook规范

自定义Hooks

有时,我们希望在组件之间复用一些状态逻辑。这个问题在传统方式上有两种流行的解决方案:高阶组件和render props。自定义Hooks可以解决这个问题,且无需向树中添加更多组件。

在本页前面,我们介绍了一个调用useState和useEffect Hooks的FriendStatus组件来订阅朋友的在线状态。我们希望在另一个组件中复用此订阅逻辑。

首先,我们将这个逻辑提取到一个名为useFriendStatus的自定义Hook中:

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

 它将friendID作为参数,并返回我们的朋友是否在线。

现在我们可以在两个组件中使用它:

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}
function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

这些组件的状态是完全独立的。Hooks这种方式是复用状态逻辑,而不是state本身。实际上,每次调用Hook都是一个完全隔离的状态,所以你甚至可以在一个组件中两次调用相同的自定义Hook。

自定义Hooks更像是一种约定而非功能。如果函数的名称以“use”开头并且它可以调用其他Hook,则称之为自定义Hook。useSomething命名约定是为了让linter插件在使用Hooks的代码中查找错误。

自定义Hook应用广泛,如表单处理、动画、声明订阅、计时器,以及可能还有更多我们没有考虑到的。 我们很高兴地期待React社区将提出什么样的自定义Hooks。

详细解释 你可以在专属页上了解有关自定义Hooks的更多信息:自定义Hooks

其它Hooks

你可能会发现一些不太常用的内置Hook很有用。例如,useContext允许你订阅React上下文而不用引入嵌套。

function Example() {
  const locale = useContext(LocaleContext);
  const theme = useContext(ThemeContext);
  // ...
}

 useReducer允许你使用reducer管理复杂组件的本地state:

function Todos() {
  const [todos, dispatch] = useReducer(todosReducer);
  // ...

详细解释 你可以在专属页上了解更多有关内置Hooks的信息:Hooks API参考

下一步

这一页都是一些概括性的介绍。如果有些地方不了解或者想详细了解更多内容,请阅读下面的章节,从State Hook文档开始。

你还可以查看Hooks API参考Hooks常见问题解答

最后,不要错过介绍页,它解释了为什么我们要添加Hooks以及我们如何开始将它们与类一起使用而无需重写我们的应用程序。

原文链接:https://reactjs.org/docs/hooks-overview.html

原文作者:react官方文档

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开心的学习之路

DayLog01.1——安装React Native

已有软件:Xcode、AndroidStudio(已有android sdk)、git

11760
来自专栏娱乐心理测试

几款ReactJS最优秀的UI框架

上篇文章中写了流行的前端UI几大框架,发现大部分评价都是Vue的UI组件库,从评论中得知漏掉了很多,也有人问React ui,自己就搜索总结下适应于ReactJ...

1.1K40
来自专栏木子昭的博客

React 中合并单元格的正确写法

用表格进行页面布局,页面布局在各种浏览器的的兼容性, 都非常好, 而在react中使用表格布局, 合并单元格的写法比较特殊, 博主查了很久才找到正确的写法, 在...

15510
来自专栏前端达人

19年你应该关注这50款前端热门工具(上)

19年,又是新的一年,“前端届”,又出了哪些新的“玩意”,今天小编向你推荐目前比较热门新鲜度靠前的50款前端工具,希望在新的一年里,对你有所帮助。

23460
来自专栏Modeng的专栏

聊一聊Vue组件模版,你知道它有几种定义方式吗?

前端组件化开发已经是一个老生常谈的话题了,组件化让我们的开发效率以及维护成本带来了质的提升。

13130
来自专栏猫哥学前班

在 React 代码中使用自动更新的 CRA 环境变量

最近写了本《Git 进阶指南》的 Gitbook,但(可能)由于 Gitbook CDN 上的缓存过于顽固,所以需要在访问 Gitbook 时,自动加上清缓存参...

19950
来自专栏我和我大前端的故事

React 总结初稿一

18 年转眼即逝,不同寻常的一样。这一年我毕业了,入坑前端。工作只用 vue ,自己又学了 react , TypeScript ,小程序,这些在工作中从未用到...

12540
来自专栏开心的学习之路

从零开始搭建图像处理实验平台(React&Flask&MongoDB)

为了争取提前毕业,最近需要做大量图像处理的实验,改代码、调参、存结果,由于专注于实验,所以丝毫没顾及代码质量,又懒得重构,导致今天写的代码明天就忘了什么意思,加...

12320
来自专栏我和我大前端的故事

像学习vue 一样学习 react

一直听说 vue 借鉴了其他两大框架的优点,真实情况我并不了解,因为我只会 vue,才入坑 react。可能是语言都是想通的,react 没有我想象中那么高攀...

24020
来自专栏终身学习者

如何编写自己的虚拟DOM

要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂——但实际上,虚拟...

15040

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励