React Context的值存储在哪里，其存储的值会在什么时候被清理？

一、React Context的值具体存储位置 #

Context的值属于React运行时维护的内存态数据，不会持久化到浏览器本地存储（localStorage/sessionStorage），也不会默认挂载到全局window对象上，它的存储位置为：

• 存放在React内部维护的Fiber虚拟DOM节点树中：你通过 <Context.Provider value={xxx}> 传入的value，会被绑定到对应Provider组件的Fiber节点的memoizedProps.value字段下
• 下层消费组件读取Context值时，会从自身Fiber节点向上遍历，找到最近的同类型Context Provider，直接读取该节点上存储的value值

Context本质是React官方实现的一套跨组件传值方案，所有数据完全在React内部生命周期中管理，不会脱离React运行时独立存在。

二、Context存储值被清理的场景 #

只有符合以下几种情况时，Context存储的值才会被清理：

• 对应Context.Provider组件被卸载：比如包裹Provider的路由页面切换、父组件条件渲染不再渲染Provider，对应的Fiber节点会被销毁，绑定在节点上的value如果没有其他外部引用，会被JS垃圾回收机制自动清理
• 显式修改Provider的value值为空：你主动将传给value属性的变量更新为undefined/null时，对应Provider存储的值会被替换为你设置的空值，不属于自动清理范畴
• 整个React应用实例被销毁：比如调用root.unmount()卸载整个应用根节点、用户刷新/关闭当前页面，React运行时占用的所有内存都会被回收，所有Context存储的值自然也会被清除

注意：Context的作用域完全由Provider的渲染范围决定，不同Provider节点存储的value互不影响，单个Provider卸载不会干涉其他同类型Provider的存储值。

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