React Context API避免无关子组件重渲染及去掉可选链写法

问题1：Context更新触发无关组件重渲染的解决方案 #

根本原因 #

React Context的默认更新规则是：只要Context的value引用发生变化，所有消费该Context的组件都会强制重渲染。你当前的useCounterAndContent每次状态更新都会返回一个全新的对象，所以无论是修改count还是content，整个Context值都会更新，两个消费组件自然都会触发重渲染。

可行解决方案 #

方案1：拆分独立Context（最推荐，无额外依赖）

把两个完全独立的业务状态拆成两个单独的Context维护，从根源上避免互相干扰：

// 计数Context
import { FC, createContext, useContext, useState } from 'react';

const useCounter = () => {
  const [count, setCount] = useState(0);
  // 用函数式更新避免闭包问题
  const increase = () => setCount(prev => prev + 1);
  return { count, increase };
};
type CountContextType = ReturnType<typeof useCounter>;
// 这里用类型断言给默认值，后面会讲具体逻辑
const CountContext = createContext<CountContextType>({} as CountContextType);

export const CountContextProvider: FC = ({ children }) => {
  const value = useCounter();
  return <CountContext.Provider value={value}>{children}</CountContext.Provider>
};
// 自定义消费hook，避免直接调用useContext
export const useCountContext = () => useContext(CountContext);

同理实现内容相关的ContentContext和配套Provider、消费hook。两个组件分别消费对应的Context，就不会出现跨组件触发重渲染的问题。

方案2：使用带选择器的Context（适合不想拆分Context的场景）

如果不想拆分Context，可以用use-context-selector库实现按需订阅，组件只监听自己需要的字段，只有对应字段变化时才会重渲染：

import { createContext, useContextSelector } from 'use-context-selector';

// Context创建逻辑和原来一致
const CounterAndContentContext = createContext<ReturnType<typeof useCounterAndContent>>(null);

// Counter组件只订阅需要的count和increase
const Counter = () => {
  const count = useContextSelector(CounterAndContentContext, v => v.count);
  const increase = useContextSelector(CounterAndContentContext, v => v.increase);
  return (
    <>
      <span>{count}</span>
      <button type="button" onClick={increase}>增加</button>
    </>
  );
};

// InputContent只订阅content和setContent
const InputContent = () => {
  const content = useContextSelector(CounterAndContentContext, v => v.content);
  const setContent = useContextSelector(CounterAndContentContext, v => v.setContent);
  return <input type="text" value={content} onChange={e => setContent(e.target.value)} />;
};

问题2：去掉Context消费时的可选链 #

方案：类型断言+自定义消费hook #

因为所有消费Context的组件都是嵌套在Provider内部的，默认值实际上永远不会被用到，所以可以直接用类型断言把默认值标记为对应类型，再配合自定义hook做兜底校验，既可以去掉可选链，还能提前捕获错误使用的场景：

// 创建Context时用类型断言指定默认值类型
const CounterAndContentContext = createContext<ReturnType<typeof useCounterAndContent>>({} as ReturnType<typeof useCounterAndContent>);

// 自定义消费hook，加校验逻辑
const useCounterAndContentContext = () => {
  const context = useContext(CounterAndContentContext);
  // 兜底校验：如果在Provider外使用直接抛明确错误
  if (!context.count && context.count !== 0) { // 可以根据实际字段调整判断逻辑
    throw new Error('useCounterAndContentContext必须在CounterAndContentContextProvider内部使用');
  }
  return context;
};

组件内直接调用useCounterAndContentContext()即可，不需要再加可选链。

额外提示 #

你当前写的CounterAndContentContextProvider组件缺了return语句，实际运行会报错，需要补全return：

const CounterAndContentContextProvider: FC = ({ children }) => {
  const counter = useCounterAndContent();
  // 补全return
  return <CounterAndContentContext.Provider value={counter}>
    {children}
  </CounterAndContentContext.Provider>
};

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