快速掌握useContext和useReducer：React里的全局状态管理神器！

2023-10-10 22:30:24

在React中使用useContext和useReducer轻松管理数据

在React应用程序中管理数据是一项常见且至关重要的任务。通过使用useContext 和useReducer Hooks，您可以轻松有效地管理全局和复杂状态，从而简化您的代码并提高其可维护性。

useContext: 共享数据而不传递道具

useContext Hook使您能够在组件树中共享数据，而无需逐层通过道具传递。这可以通过以下步骤实现：

创建上下文对象： 使用createContext函数创建一个上下文对象，它将保存要共享的数据。
在父组件中提供数据： 在父组件中，使用Provider组件包装子组件，并将上下文对象作为value prop提供。
在子组件中使用数据： 在子组件中，使用useContext Hook并传递上下文对象作为参数来获取共享数据。

代码示例：

// ThemeContext.js
import { createContext } from "react";

const ThemeContext = createContext({
  theme: "light",
  toggleTheme: () => {},
});

export default ThemeContext;

// ParentComponent.js
import ThemeContext from "./ThemeContext";

const ParentComponent = () => {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {/* 子组件 */}
    </ThemeContext.Provider>
  );
};

// ChildComponent.js
import { useContext } from "react";
import ThemeContext from "./ThemeContext";

const ChildComponent = () => {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div>
      {/* 使用共享的数据 */}
    </div>
  );
};

useReducer: 轻松管理复杂状态

useReducer Hook可用于管理复杂的状态，而无需使用繁琐的setState方法。它通过以下步骤工作：

定义一个reducer函数： 创建一个reducer函数，它接受当前状态和一个操作作为参数，并返回一个新的状态。
在父组件中创建状态变量： 在父组件中，使用useReducer Hook创建一个新的状态变量，它接受reducer函数和一个初始状态作为参数。
在组件中更新状态： 要更新状态，请调用dispatch函数并传递一个包含所需更新的操作。

代码示例：

// CounterReducer.js
const counterReducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};

// ParentComponent.js
import CounterReducer from "./CounterReducer";

const ParentComponent = () => {
  const initialState = 0;
  const [count, dispatch] = useReducer(counterReducer, initialState);

  const handleIncrement = () => {
    dispatch({ type: "INCREMENT" });
  };

  const handleDecrement = () => {
    dispatch({ type: "DECREMENT" });
  };

  return (
    <div>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
      <div>Count: {count}</div>
    </div>
  );
};