React Hooks
Hooks 在 React 16.8 版本中被添加。
Hooks 允许函数组件访问 state 和其他 React 功能。因此，类组件通常不再需要。
尽管 Hooks 通常会取代类组件，但 React 没有移除类的计划。
什么是 Hook？
Hooks 允许我们“钩入” React 功能，如 state 和生命周期方法。
示例
这是一个 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 />);你必须从 react import Hooks。
这里我们使用 useState Hook 来跟踪应用程序状态。
State 通常指的是需要跟踪的应用程序数据或属性。
Hook 规则
Hooks 有 3 条规则
- Hooks 只能在 React 函数组件内调用。
- Hooks 只能在组件的顶层调用。
- Hooks 不能是条件性的
注意： Hooks 在 React 类组件中将无法工作。
自定义 Hooks
如果你有需要在多个组件中重用的状态逻辑，你可以构建自己的自定义 Hooks。
我们将在 自定义 Hooks 部分 中提供更多详细信息。
