Hooks 是什么？如何使用 Hooks？全网最全 Hooks 指南！

2024-02-18 12:18:03

Hooks 的魔力：赋予函数组件超能力

动机：揭开 Hooks 的诞生秘辛

在 React 的浩瀚世界中，曾经只有类组件独领风骚，它们拥有状态、生命周期方法和事件处理程序等特权。然而，随着时间的推移，类组件暴露出了自身的缺点：

复杂性： 当组件处理庞大状态和繁杂生命周期方法时，代码变得错综复杂，让人望而生畏。
可重用性： 类组件的状态和生命周期方法紧密相连，难以在不同组件间复用，犹如陷入了一座牢笼。
可测试性： 私有的状态和生命周期方法为测试带来了重重阻碍，犹如黑匣子般难以窥探内部。

为了打破这些枷锁，Hooks 应运而生，旨在将函数组件武装成超级英雄，让它们也能驾驭状态和更多 React 特性。

基本用法：踏上 Hooks 之旅

Hooks 的基本用法简单易懂，如同打开一扇神奇之门。首先，在函数组件中导入所需的 Hooks，如 useState、useEffect 等。然后，在组件体内，即可利用这些 Hooks 来掌控状态、副作用以及其他 React 特性。

例如，以下代码展示了 useState Hook 如何管理组件状态：

import React, { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

export default MyComponent;

这段代码中，useState Hook 返回了一个数组，第一个元素是当前状态值 count，第二个元素是用于更新状态的函数 setCount。通过调用 setCount(count + 1)，可以轻松更新 count 状态。

而 useEffect Hook 则用来管理副作用，它返回一个函数，该函数将在组件挂载后和每次状态更新后执行。例如，以下代码使用 useEffect Hook 更新文档

import React, { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    document.title = `Count: ${count}`;
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

export default MyComponent;