React Hooks生命周期

React Hooks 提供了一种在函数组件中使用状态和其他 React 特性的方式，它们可以让你在不编写类的情况下使用 state, 生命周期 和其他特性。

以下是一些常见的 React Hooks 以及它们的使用场景：

1. useState

useState 可以让你在函数组件中添加 state。

import React, { useState } from 'react';
 
function Example() {
  // 定义一个 'count' state 变量，初始值为 0
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2. useEffect

useEffect 可以让你在函数组件中添加副作用。它就像是 componentDidMount，componentDidUpdate 和 componentWillUnmount 的组合。

import React, { useState, useEffect } from 'react';
 
function Example() {
  const [count, setCount] = useState(0);
 
  // 类似于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用 ref 来直接访问 DOM
    document.title = `You clicked ${count} times`;
  });
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

3. useContext

useContext 可以让你在组件之间共享和访问数据。

import React, { useContext } from 'react';
 
const UserContext = React.createContext(null);
 
function UserInfo() {
  const user = useContext(UserContext);
  return <p>Hello, {user.name}!</p>;
}
 
function App() {
  const user = { name: 'Alice', avatar: 'https://...' };
  return (
    <UserContext.Provider value={user}>
      <UserInfo />
    </UserContext.Provider>
  );
}

4. useReducer

useReducer 是 useState 的替代方法，它更适合管理复杂的状态。

import React, { useReducer } from 'react';
 
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      throw new Error();
  }
}
 
function Counter() {
  const [count, dispatch] = useReducer(reducer, 0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

5. useCallback

useCallback 可以让你保存一个函数，它只会在某些依赖项改变时才变化。

import React, { useCallback } from 'react';
 
function Example() {
  const memoizedCallback = useCallback(
    () => {
      doSomething(a, b);
    },
    [a, b],
  );
 
  return <MyCompone