React Hooks

React 在 16.8 版本中添加了 Hooks。

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

虽然 Hooks 通常会取代类组件，但没有计划从 React 中删除类。

什么是钩子？

Hooks 允许我们 "hook" 进入 React 功能，例如状态和生命周期方法。

例子：

这是一个 Hook 的示例。如果没有意义，请不要担心。我们将在下一节。

import React, { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <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>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);

运行示例 »

你必须import钩子来自react。

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

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

钩子规则

Hook 有 3 条规则：

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

笔记：Hooks 在 React 类组件中不起作用。

定制挂钩

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

我们将在定制挂钩部分。