解析Context API注意事项：将Provider值提升至父state为何能优化性能

Context的消费者组件重渲染的触发逻辑是：只要Provider的value属性的引用发生变化，所有消费该Context的组件都会触发重渲染，和组件自身props是否变化、是否做了memo优化无关。

性能问题的根源 #

很多开发者使用Context时会直接在Provider的value属性内联声明对象、数组、函数这类引用类型值，属于典型的错误写法：

// 反例
function App() {
  const [otherState, setOtherState] = useState(0)
  // otherState更新触发App重渲染时，每次都会生成新的{ theme: 'light' }对象
  return (
    <ThemeContext.Provider value={{ theme: 'light' }}>
      <ChildComponent />
    </ThemeContext.Provider>
  )
}

这种写法下，哪怕theme的值从来没有变化，只要父组件的其他无关状态更新触发重渲染，所有消费ThemeContext的组件都会跟着无意义重渲染，产生大量不必要的性能开销。

优化方案的实现逻辑 #

把Provider的value提升到父组件的state中存储，本质是给value加了一层引用缓存：

• 只有当你主动调用state的更新方法修改value内容时，value的引用才会发生变化，此时才会触发消费者组件重渲染，符合实际业务更新逻辑
• 父组件其他无关状态更新时，state里存储的value引用保持不变，不会触发消费者组件的无意义重渲染

对应的正确写法示例：

// 正例
function App() {
  const [otherState, setOtherState] = useState(0)
  // contextValue的引用只有调用setContextValue时才会变化
  const [contextValue, setContextValue] = useState({ theme: 'light' })
  return (
    <ThemeContext.Provider value={contextValue}>
      <ChildComponent />
    </ThemeContext.Provider>
  )
}

如果value中包含函数属性，还可以配合useCallback缓存函数引用，避免函数更新导致value引用意外变化，进一步稳定value的引用。

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