如何在更新Context Provider值时避免所有子组件重渲染

你当前的代码存在几个写法错误，直接导致了非必要的全量重渲染：

• createContext被写在DataListener组件内部：每次组件重渲染都会生成全新的Context实例，完全破坏React的Context更新比对逻辑，会直接触发所有关联组件的异常重渲染。
• 事件回调里读取的是闭包捕获的初始data值：不仅会导致后续追加数据时覆盖历史内容，缺失的依赖也会触发意外的渲染链路。
• Data.Provider没有传入value属性：消费端根本无法获取更新后的数据，属于基础用法错误。
• 认知误区：React Context的默认渲染逻辑是只有主动通过useContext订阅了该Context的组件，才会在Provider的value变更时触发重渲染。普通嵌套、不消费Context的子组件并不会因为Context更新重渲染，你遇到的全量重渲染基本都是上述写法错误导致的。

1. 将createContext移到组件外部，保证Context实例引用全局唯一
2. 事件回调中使用函数式方式更新state，避免闭包陷阱，不需要给useEffect添加data依赖
3. 给Provider传入经过useMemo包裹的稳定value值，避免每次渲染生成新的引用触发无意义更新
4. 子节点通过props.children透传，不要直接内联写在Provider标签内部，保证子节点引用稳定
5. 组件卸载时移除自定义事件监听，避免内存泄漏

import { useState, useEffect, createContext, useMemo } from 'react';

// Context定义移到组件外，全局唯一
const Data = createContext([]);

const DataListener = (props) => {
    const [data, setData] = useState([]);

    useEffect(() => {
        const handleNewData = (e) => {
            // 函数式更新，永远拿到最新的state值，不受闭包影响
            setData(prevData => [...prevData, e.detail]);
        };
        document.addEventListener('newDataEvent', handleNewData);
        // 卸载时清理事件监听
        return () => document.removeEventListener('newDataEvent', handleNewData);
    }, []);

    // 只有data真正变化时，才生成新的contextValue引用
    const contextValue = useMemo(() => data, [data]);

    return (
        <Data.Provider value={contextValue}>
            {props.children}
        </Data.Provider>
    );
};

export { Data, DataListener };

如果后续Context存储的数据结构更复杂，不同组件只用到其中部分字段，想进一步减少消费端的重渲染，可以选择以下方案：

• 按更新频率拆分Context：把高频变化的数据和低频/不变的数据拆分为多个独立Context，组件仅订阅自己需要的Context即可
• 消费组件使用React.memo包裹，自定义props比对逻辑，仅当组件依赖的字段发生变化时触发重渲染
• 使用带selector能力的Context方案，支持组件仅订阅自己需要的数据片段，无关数据变更不会触发重渲染

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