useState + useEffect 和 useContext + useReducer

在 React 中，有两个常用的钩子函数 useState 和 useEffect，它们可以帮助我们管理组件的状态和副作用，使得组件的逻辑更加清晰和易于维护。而 useContext 和 useReducer 也是很有用的钩子函数，它们可以帮助我们实现更复杂的状态管理。

useState + useEffect

useState 可以帮助我们在函数式组件中声明和更新状态，而 useEffect 可以帮助我们在组件挂载、更新或卸载时执行副作用操作。下面是一个使用 useState 和 useEffect 的例子：

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

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

在这个例子中，我们通过 useState 声明了一个名为 count 的状态，并且默认值设为 0。然后在渲染中，我们显示了 count 和一个 Increment 按钮，当按钮被点击时，我们调用 setCount 更新 count 的值。同时，我们还使用 useEffect 在标题中展示 count 的值。

useContext + useReducer

useContext 可以帮助我们在组件之间共享状态，而 useReducer 则可以帮助我们在组件之间管理共享状态的更新。下面是一个使用 useContext 和 useReducer 的例子：

import React, { useContext, useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

const CountContext = React.createContext();

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <CountContext.Provider value={{ state, dispatch }}>
      <CountDisplay />
      <CountButtons />
    </CountContext.Provider>
  );
}

function CountDisplay() {
  const { state } = useContext(CountContext);
  return <p>Count: {state.count}</p>;
}

function CountButtons() {
  const { dispatch } = useContext(CountContext);
  return (
    <>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </>
  );
}

在这个例子中，我们首先定义了一个初始状态和一个 reducer，然后通过 createContext 创建了一个名为 CountContext 的 context。接着，我们定义了三个组件：Counter、CountDisplay 和 CountButtons。在 Counter 中，我们使用 useReducer 声明了一个名为 state 的状态和一个 dispatch 函数，然后通过 CountContext.Provider 将 state 和 dispatch 传递给子组件。在 CountDisplay 和 CountButtons 中，我们使用 useContext 从 CountContext 中获得了 state 和 dispatch，并且分别展示了当前的 count 值，并且绑定了 increment 和 decrement 操作。

结论

useState 和 useEffect 以及 useContext 和 useReducer 都是非常有用的 React 钩子函数，它们可以帮助我们管理组件的状态和副作用，以及在组件之间共享状态和管理共享状态的更新。熟练掌握这些钩子函数，可以让我们写出更加清晰、简洁和易于维护的 React 组件。