React Hooks（钩子）

在 React 16.8 版中添加了 Hooks（钩子） 。

Hooks 允许功能组件访问状态和其他特性。因此，通常不再需要 类组件。

什么是 Hook?

Hooks 钩子允许我们 "钩起" React 的特性，比如状态和生命周期方法。

实例:

这是一个钩子的例子。如果它没有意义，不要担心。我们将在 下一节 更详细地介绍。

import React, { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
  const [color, setColor] = useState("red");
  return (
    <>
      <h2>My favorite color is {color}!</h2>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")}
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("pink")}
      >Pink</button>
      <button
        type="button"
        onClick={() => setColor("green")}
      >Green</button>
    </>
  );
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

您必须从 React 导入 Hook 钩子。

这里我们使用 useState 钩子跟踪应用程序状态。

状态通常指需要跟踪的应用程序数据或属性。

Hook 规则

Hooks 有 3 条规则：

• Hooks 只能在 React 函数组件内部调用。
• Hooks 只能在组件的顶层调用。
• Hooks 不能是有条件的

自定义 Hooks

如果您有需要在多个组件中重用的有状态逻辑，那么您可以构建自己的自定义 Hooks。

我们将在 自定义 Hooks 这一节详细介绍。