如何用Hooks为React Context Provider设值？请求校验3种实现方案

首先我们先回顾原类组件的核心逻辑：在组件初始化时创建一个包含something属性的对象，作为Context Provider的value传递，后续只有state更新时才会触发Provider的value变化。

接下来逐个拆解你的三个版本：

版本1：存在语法错误，无法正常工作 #

export const App = () => {
  const [value] = useState(() => {
    something: 'something';
  });
  return (
    <Provider value={value}>
      <Toolbar />
    </Provider>
  );
};

问题出在useState的初始化回调里：你写的something: 'something'会被当成函数体内的标签语句，而非对象字面量，这个函数最终会返回undefined，导致value的值完全不符合预期。如果要在回调里返回对象，必须给对象加上括号：

const [value] = useState(() => ({
  something: 'something'
}));

这样才能正确初始化value为目标对象。

版本2：功能可用但存在性能隐患 #

export const App = () => {
  const value = {
    something: 'something',
  };
  return (
    <Provider value={value}>
      <Toolbar />
    </Provider>
  );
};

这个版本能正常传递Context值，但每次组件渲染时都会创建一个新的value对象。由于Context Provider会在value的引用变化时，触发所有消费该Context的组件重新渲染——即便something的值没有变化，也会导致不必要的重渲染，在复杂组件树里可能影响性能。

版本3：逻辑错误，与原组件行为不符 #

export const App = (props) => {
  const value = {
    something: props.something,
  };
  return (
    <Provider value={props.something}>
      <Toolbar />
    </Provider>
  );
};

这里有两个明显问题：

1. 你定义了value对象但完全没用到，属于冗余代码；
2. Provider传递的value是props.something，而原类组件传递的是包含something属性的对象，这直接改变了Context值的结构，会导致消费组件读取不到正确的属性。

推荐的正确实现方案 #

我们需要兼顾正确性和性能，分三种场景给出方案：

场景1：Context值不需要动态更新 #

如果something的值不会变化，用useMemo缓存这个对象，避免每次渲染创建新引用：

export const App = () => {
  const value = useMemo(() => ({
    something: 'something'
  }), []); // 空依赖数组，只在组件初始化时创建一次

  return (
    <Provider value={value}>
      <Toolbar />
    </Provider>
  );
};

场景2：Context值需要动态更新（类似原类组件的state） #

如果后续需要修改something的值并同步到Context，用useState来管理状态，状态更新时会自动触发Provider的value更新：

export const App = () => {
  // 初始化状态，和原类组件的state一致
  const [value, setValue] = useState({
    something: 'something'
  });

  // 示例：如果需要修改值，可以用这个方法
  const updateSomething = (newValue) => {
    setValue(prev => ({ ...prev, something: newValue }));
  };

  return (
    <Provider value={{ ...value, updateSomething }}> {/* 可以把更新方法也传入Context */}
      <Toolbar />
    </Provider>
  );
};

场景3：基于props定制Context值（对应版本3的需求） #

如果需要根据props生成Context值，同样用useMemo缓存，避免props未变化时创建新引用：

export const App = (props) => {
  const value = useMemo(() => ({
    something: props.something
  }), [props.something]); // 依赖props.something，只有它变化时才重新创建对象

  return (
    <Provider value={value}>
      <Toolbar />
    </Provider>
  );
};

内容的提问来源于stack exchange，提问作者Aron