 

03-组件通信与状态管理

React 组件通信与状态管理：状态提升、Context 拆分、组合模式，以及 Redux Toolkit、Jotai、MobX、XState 等全局状态方案选型与状态持久化。

3.4 Context 的性能问题与拆分

Context 的 value 一旦变化，所有消费者都会重渲染（React.memo 拦不住）——解法优先级是「拆分 Context → useMemo 稳定 value → 值与操作分离 → children 透传 → 改用带选择器的状态库」。

陌上寒2026-10-13阅读()去评论

Context 是 React 提供的「依赖注入 / 跨层级读取」机制——它让你把值放在祖先组件上，任意深度的后代都能直接读取，从而消除「props 层层透传」。

陌上寒2026-10-13阅读()去评论

压缩、裁剪、加水印、抠图、拼接都在本地完成。不限张数、不限次数，图片不会传到服务器。

2026-10-13

状态应该放在「需要它的最近的公共祖先」——这就是「状态提升」；而「单一数据源」要求「同一个数据只有一个拥有者」，否则会出现不同步的 bug。

陌上寒2026-10-13阅读()去评论

React 的数据流是单向的——数据通过 props 向下传递，子组件通过调用父组件传来的回调向上通知；兄弟组件之间靠「把状态提升到公共父组件」通信。

陌上寒2026-10-13阅读()去评论