React Context全局状态交互触发过度重渲染问题求解

所有状态存放在单一Context下是重渲染问题的核心：只要Context的value发生变化，所有订阅该Context的组件，无论是否使用了变化的那部分状态，都会强制触发重渲染，React.memo无法阻断Context层级的更新。

• 拆分多个独立Context，按状态的使用场景隔离：
  1. 布局控制Context：仅存储RightBar显隐状态、切换方法，只有Navbar控制按钮、RightBar组件、布局容器订阅该Context，其余组件完全不关联
  2. 聊天状态Context：存储消息列表、当前会话ID等低频率更新的状态，仅提供给聊天窗口、消息列表组件使用
  3. 输入状态Context：若输入框内容确实需要全局共享，单独拆分该Context，仅输入框、发送按钮等少数组件订阅；如果输入值仅输入框自身使用，直接将状态下沉到输入框组件内部用useState管理，完全不需要放到全局Context
• 保证Context的value引用稳定：
  不要在Provider的value属性里直接定义字面量对象，每次Provider渲染都会生成新的对象引用，触发不必要的更新。需要用useMemo包裹value对象，内部的方法用useCallback包裹：

  const toggleRightBar = useCallback(() => {
    setShow(prev => !prev)
  }, [])
  const layoutContextValue = useMemo(() => ({
    showRightBar,
    toggleRightBar
  }), [showRightBar, toggleRightBar])
  
  // Provider使用
  <LayoutContext.Provider value={layoutContextValue}>
    {children}
  </LayoutContext.Provider>
  

• 若不想拆分过多Context，可以引入选择器模式的Context实现，只在组件依赖的Context字段变化时才触发更新，无需额外修改现有结构。

• 分离服务层与状态层：将所有CRUD请求逻辑抽为纯函数，存放在独立的/services目录下，比如chat.js存放聊天相关的请求方法，user.js存放用户相关的请求方法，不要将请求逻辑耦合在自定义Hook或组件中
• 自定义Hook按职责拆分：useChatService仅返回聊天相关的状态与操作方法，useUsersService仅处理用户相关逻辑，Hook内部返回的操作方法统一用useCallback包裹，避免每次Hook调用生成新的函数引用，导致依赖该函数的组件或Context不必要更新
• 不需要跨组件共享的CRUD逻辑无需放到Context中，组件内部直接调用对应Hook即可，仅将需要跨组件共享的状态存入对应的Context。

1. 输入框输入触发全量重渲染：优先将输入框状态从全局Context移除，下沉到输入框组件内部管理，发送消息时读取组件内部状态即可，从根源上避免输入操作触发全局更新。
2. 切换RightBar触发全量重渲染：将RightBar相关状态移动到独立的布局Context中，仅相关组件订阅，切换状态时不会影响其他业务组件。

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