在 React Native 中使用 Context 管理动态解析的标题节点（如 Markdown 编辑器的 TOC）时，若每次 setHeaderNodes 都传入新引用的数组，会导致消费者组件反复重渲染。核心解法是用稳定依赖（如序列化后的字符串）替代原始数组引用作为 useEffect 依赖项，从而阻断无效更新循环。
在 react native 中使用 context 管理动态解析的标题节点（如 markdown 编辑器的 toc）时，若每次 `setheadernodes` 都传入新引用的数组，会导致消费者组件反复重渲染。核心解法是用稳定依赖（如序列化后的字符串）替代原始数组引用作为 `useeffect` 依赖项，从而阻断无效更新循环。
React Context 的重渲染陷阱常源于「看似相同、实则不同」的数据引用。在你的 Markdown 编辑器场景中，ast.filter(...).map(...) 每次都会生成一个全新数组实例，即使其中每个 HeaderNavigationNode 的 content 和 line 完全一致。当 useEffect 以 [headers] 为依赖时，React 会浅比较该数组引用 —— 新旧引用永远不等，于是触发 setHeaderNodes(headers)，进而导致 Context Provider 重新提供值，最终使所有 useHeaderNavigation() 的消费者（如侧边栏目录组件）强制重渲染，形成无限循环。
✅ 正确解法：用值语义代替引用语义
不依赖数组本身，而依赖其结构化内容的稳定性。JSON.stringify(headers) 将节点数组序列化为确定性字符串（前提是 content 和 line 均为可序列化基础类型），只要节点逻辑内容未变，字符串就恒定不变，useEffect 便不会重复执行：
useEffect(() => {
setHeaderNodes(headers);
}, [JSON.stringify(headers)]); // ✅ 稳定依赖：仅当实际内容变化时触发
⚠️ 注意事项：
-
确保数据纯净：
headers数组内对象必须仅含string/number/boolean等可序列化字段（你当前的content: string+line: number完全符合）； -
避免嵌套函数/Date/undefined/null：若未来扩展节点包含不可序列化字段（如
ref,function,undefined），JSON.stringify会静默忽略或返回"null"，导致误判； -
性能权衡：
JSON.stringify在高频编辑场景下有轻微开销，但对 TOC 这类低频更新（仅文本变更时触发）完全可接受；若需极致优化，可用fast-deep-equal库实现更高效深比较，但需额外依赖； -
不要滥用
React.memo或useMemo治标：React.memo(Editor)仅阻止 Editor 自身重渲染，无法解决 Context Provider 层级的无效通知；而useMemo包裹headers仅缓存数组引用，无法解决ast本身每次都是新对象的问题 —— 根源仍在依赖项不稳定。
? 进阶建议：若项目规模扩大，可将标题提取逻辑抽离为自定义 Hook（如 useMarkdownHeaders(value)），内部自动处理深相等判断，并支持配置节流或防抖，进一步提升可维护性。
总结：React Context 中状态更新的「稳定性」关键在于依赖项的值一致性，而非对象引用一致性。用 JSON.stringify 对简单扁平数组做依赖锚定，是轻量、可靠且符合 React 思维范式的标准解法。
