在 React Native 中使用 Context 管理动态解析的标题节点（如 Markdown 编辑器的目录结构）时，若每次 setHeaderNodes 都传入新引用的数组，会导致依赖该 Context 的组件反复重渲染。核心解法是用稳定依赖（如序列化后的字符串）替代原始数组引用作为 useEffect 依赖项。
在 react native 中使用 context 管理动态解析的标题节点（如 markdown 编辑器的目录结构）时，若每次 `setheadernodes` 都传入新引用的数组，会导致依赖该 context 的组件反复重渲染。核心解法是用稳定依赖（如序列化后的字符串）替代原始数组引用作为 `useeffect` 依赖项。
当 Editor 组件基于 Markdown AST 动态提取 headers 数组并调用 setHeaderNodes(headers) 时，即使内容完全相同，headers 每次都是新创建的数组（即 headers !== prevHeaders），导致 Context 的 value 对象引用变化，进而触发所有消费该 Context 的组件（包括 CustomDrawer、Main 等）强制重渲染——这正是无限循环的根源。
虽然 useMemo 可缓存 headers 计算结果，但它无法解决「数组引用始终不同」的本质问题。React.memo 或 shouldComponentUpdate 属于副作用抑制手段，治标不治本，且易掩盖数据流设计缺陷。
✅ 推荐方案：稳定化 useEffect 依赖
将 headers 序列化为 JSON 字符串作为 useEffect 的依赖项，确保仅当实际内容变更时才触发更新：
useEffect(() => {
setHeaderNodes(headers);
}, [JSON.stringify(headers)]); // ✅ 内容驱动，而非引用驱动
该方式利用了 JSON.stringify 对扁平对象数组（如 HeaderNavigationNode[]）的可靠序列化能力，语义清晰、无额外依赖。注意：此方法要求 headers 中的对象属性顺序一致（TypeScript + parse() 通常保证）、不含函数/undefined/Date 等不可序列化值（本例中 content: string 和 line: number 完全安全）。
⚠️ 注意事项与进阶建议
-
性能权衡：
JSON.stringify在高频编辑场景下有微量开销，但对目录级标题（通常 fast-deep-equal）替代：import equal from 'fast-deep-equal'; useEffect(() => { if (!equal(headers, headerNodes)) { setHeaderNodes(headers); } }, [headers, headerNodes, equal]); -
Context 值最小化：确保
NavigationContext.Provider的value对象本身也避免不必要的重建（当前代码中headerNodes和setHeaderNodes均稳定，符合最佳实践）。 -
调试技巧：在
useEffect内添加日志可验证是否真正消除冗余调用：useEffect(() => { console.log('[HeaderSync] Updated headers:', headers); setHeaderNodes(headers); }, [JSON.stringify(headers)]);
综上，通过将依赖从「不稳定引用」转向「稳定内容标识」，既保持逻辑清晰性，又从根本上切断重渲染链路——这是 React 状态管理中「依赖收敛」原则的典型应用。
