Hooks 简介

Hooks 是 React 中用于在组件中添加一些“钩子”的函数，它允许你将 JavaScript 代码嵌入到组件的声明周期中。这使得在组件中实现状态管理和副作用变得更加容易。

为什么使用 Hooks？

使用 Hooks 的主要优势包括：

• 易于理解：Hooks 让组件的状态管理和生命周期更容易理解。
• 可重用性：你可以将相同的逻辑重用于多个组件。
• 功能强大：Hooks 提供了许多强大的功能，例如 useState、useEffect、useContext 等。

常用 Hooks

以下是一些常用的 Hooks：

• useState：用于在组件中添加状态。
• useEffect：用于在组件中添加副作用。
• useContext：用于在组件中访问上下文。
• useCallback：用于记忆回调函数。
• useMemo：用于记忆计算结果。

useState

useState 是最常用的 Hook 之一，它允许你在组件中添加状态。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect

useEffect 用于在组件中添加副作用，例如数据获取、订阅或手动更改 DOM。

import React, { useEffect, useState } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/data');
      const result = await response.json();
      setData(result);
    };
    fetchData();
  }, []);

  return (
    <div>
      {data ? <div>{JSON.stringify(data)}</div> : <p>Loading...</p>}
    </div>
  );
}

扩展阅读

更多关于 Hooks 的信息，请查看 React 官方文档。

[center]https://cloud-image.ullrai.com/q/Hooks/[/center]