React Hook 是 React 16.8 新增的特性，它可以让开发者在无需编写类组件的情况下，使用状态和其他 React 特性。本文将介绍如何使用 React Hook，并谈一谈开发者在使用时需要注意的事项。
前置知识
在学习 React Hook 之前，你需要了解以下React的基本概念：
- JSX 语法
- React 组件的生命周期
- React State 和 Props
如果你还不了解这些概念，可以先学习 React 基础知识再来了解 React Hook。
React Hook 的使用
React Hook 提供了一些内置的 Hook，你可以使用它们来管理组件的状态和其它特性：
useState
useState 是 React Hook 中最基础的一个 Hook，它用于管理组件的状态。通过 useState，我们可以在 Function Component 中使用 State。
下面是一个简单的例子，使用 useState 来管理一个组件的状态：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-useState 接收一个初始的 State，并返回一个数组，数组的第一项是当前 State，第二项是 State 更新函数。在上面的例子中，我们使用了 ES6 中的数组解构的方式来获取这两项。
useEffect
useEffect 是另一个常用的 Hook，它用于在组件渲染时执行副作用操作，并在组件卸载时清除副作用操作。
下面是一个简单的例子，使用 useEffect 来更新网页标题：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------------ -- -
-------------- - ---- ------- -------- -------
---
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-在上面的例子中，我们在 useEffect 中传入一个函数，这个函数会在组件渲染之后执行。在这个函数中，我们修改了网页标题。这个函数返回的函数会在组件卸载时执行，这里我们没有做任何操作。
useContext
useContext 是用于使用 Context 的 Hook。Context 是一种在组件之间共享数据的方式，你可以在不同的组件中使用 useContext 来访问这些共享的数据。
下面是一个简单的例子，使用 useContext 来访问 UserContext 中存储的用户信息：
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ ----------- ---- ----------------
-------- ---------- -
----- ---- - ------------------------
------ -
-----
-------- ---------------
------- --------------
------
--
-在上面的例子中，我们从 UserContext 中获取了用户信息，并渲染了用户的名字和年龄。
注意事项
在使用 React Hook 时，你需要注意以下几点：
只在 Function Component 中使用 Hook
Hook 只能在 Function Component 中使用，不能在 Class Component 中使用。
按照约定规则命名 Hook 名称
自定义 Hook 必须以 "use" 开头，否则 React 将无法判断它是否为 Hook。
每个 Hook 只使用一次
每个 Hook 只能使用一次，不能在同一个 Function Component 中多次使用同一个 Hook。如果你需要使用多次相同的 Hook，应该将它们抽象成一个自定义 Hook。
理解 Hook 调用顺序
在一个 Function Component 中，Hook 必须按照约定顺序调用，否则会出现不可预料的错误。
具体来说，就是 useState、useEffect、useContext 等需要按照约定顺序调用。
不要在循环，条件语句中使用 Hook
在循环、条件语句等地方使用 Hook 会导致 Hook 的调用顺序出现错误。
比如，在以下的例子中，我们在循环中使用 useState，这会导致每次循环都会调用 useState：
import React from 'react';
function MyComponent({ items }) {
items.forEach(item => {
const [value, setValue] = useState(item.initialValue);
});
return <div />;
}正确的做法是将 useState 提到循环外面，然后在循环中使用它，如下所示：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------------- ----- -- -
----- -------- ---------- - ----------------------- -- --------------------
------ -
-----
------------------- ------ -- -
-- -- ----- --
---
------
--
-总结
React Hook 是 React 16.8 新增的特性，它可以让开发者在无需编写类组件的情况下，使用状态和其他 React 特性。
在使用 React Hook 时，你需要按照约定规则进行命名、调用，避免出现不可预料的错误。同时，你需要理解 Hook 调用顺序，以及不要在循环、条件语句等地方使用 Hook。
React Hook 可以让你的代码更加简洁易读，是 React 开发中不可或缺的一部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647afbb7968c7c53b0690e9f