Hooks 概述

Hooks 是用于管理组件生命周期和状态的函数。在 React 中，Hooks 允许你在不编写类的情况下使用 state 以及其他的 React 特性。

为什么使用 Hooks？

使用 Hooks 可以让你在不编写类的情况下使用 state 以及其他的 React 特性。这使得代码更加简洁，易于维护。

常用 Hooks

useState: 用于在函数组件中添加 state。
useEffect: 用于在组件挂载和更新后执行副作用操作。
useContext: 用于在组件间共享值。
useReducer: 用于替代 useState 和 useContext，处理更复杂的状态逻辑。
useCallback: 用于返回一个记忆化的回调函数。
useMemo: 用于返回一个记忆化的值。

例子

以下是一个使用 useState 和 useEffect 的简单例子：

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // 依赖项数组，仅当 count 发生变化时，才重新执行

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

更多关于 Hooks 的信息，请参阅我们的Hooks 教程。

图片