zh/guides/hooks

Hooks 是 React 应用程序中非常强大的功能，它允许你在组件的不同阶段插入代码。以下是一些常见的 Hooks 使用场景：

常见 Hooks 使用场景

useState: 用于在组件中添加状态（State）。
useEffect: 用于在组件渲染后执行副作用操作，例如数据获取、订阅或手动更改 DOM。
useContext: 用于访问 React 上下文（Context）。
useReducer: 用于替代 useState 在更复杂的状态逻辑中。
useCallback: 用于缓存回调函数，避免不必要的渲染。
useMemo: 用于缓存计算结果，避免不必要的计算。

使用 useState

useState 是 React 中最常用的 Hook 之一，它允许你在组件中添加可变的状态。以下是一个简单的示例：

import React, { useState } from 'react';

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

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

使用 useEffect

useEffect 用于在组件渲染后执行副作用操作。以下是一个在组件加载时获取数据的示例：

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空依赖数组表示这个 effect 只在组件挂载时运行一次

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

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

zh/guides/hooks

常见 Hooks 使用场景

使用 useState

使用 useEffect

相关资源