useContext更佳实践代码

React useContext最佳实践

最新推荐文章于 2025-11-06 15:29:04 发布

原创最新推荐文章于 2025-11-06 15:29:04 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #python #vue #js #java

本文介绍了一种使用React的useContext Hook的最佳实践，通过分离状态和控制逻辑，避免了因未正确提供上下文而导致的运行时错误，确保在编译时就能发现错误。此方法适用于复杂的组件状态管理，同时保持了数据和控制逻辑的独立性。

原文链接: useContext更佳实践代码

上一篇: react系列文章一点解读

下一篇: ts 字符串模板类型 lodash get函数的类型推断和vuex 合法的 action

useContext更佳实践

主要思想:

为了避免使用context时, 外层并没有注入, 导致的错误, 将错误前置, 避免在运行时出错, 而是在编译时检查

简单的状态使用state, 对于复杂的状态可以使用reducer

使用数据和控制分离的方式, 修改数据的组件不会在数据变化时更新

count-context.js

import React from "react";
const CountStateContext = React.createContext();
const CountDispatchContext = React.createContext();
const initState = 0;
export function CountProvider({ children }) {
  const [state, dispatch] = React.useState(initState);
  return (
    <CountStateContext.Provider value={state}>
      <CountDispatchContext.Provider value={dispatch}>
        {children}
      </CountDispatchContext.Provider>
    </CountStateContext.Provider>
  );
}

export function useCountState() {
  const context = React.useContext(CountStateContext);
  if (context === undefined) {
    throw new Error("必须在CountProvider内使用useCountState");
  }
  return context;
}

export function useCountDispatch() {
  const context = React.useContext(CountDispatchContext);
  if (context === undefined) {
    throw new Error("必须在CountProvider内使用useCountDispatch");
  }
  return context;
}

count-display.jsx

import React from "react";
import { useCountState } from "./count-context";
function CountDisplay() {
  const count = useCountState();
  console.log("display render")
  return <div>display count:{count}</div>;
}
export default CountDisplay;

count-dispatch.jsx

import React from "react";
import { useCountDispatch } from "./count-context";
function CountDispatch() {
  const dispatch = useCountDispatch();
  const inc = () => {
    dispatch((v) => v + 1);
  };
  console.log("dispatch render")
  return (
    <div>
      <button onClick={inc}>inc</button>
    </div>
  );
}
export default CountDispatch;

app.jsx

import React from "react";
import {
  CountProvider,
} from "./count-context";
import CountDisplay from "./count-display";
import CounterDispatch from "./count-dispatch";
function App() {
  return (
    <CountProvider>
      <CountDisplay />
      <CounterDispatch />
    </CountProvider>
  );
}

export default App;