State-based vs Signal-based rendering
7 months ago
- #frontend
- #reactivity
- #performance
- 基于状态的渲染（如React Hooks）会在状态创建处触发重新渲染，影响所有子组件，无论它们是否使用该状态
- 基于信号的渲染（如Preact Signals、Solid.js）仅在状态被消费处触发重新渲染，实现更细粒度且高效的更新
- 在基于状态的渲染中，上下文更新会导致所有消费者重新渲染，即使它们并未使用更新后的值
- 基于信号的上下文渲染确保只有访问信号值的组件会重新渲染，从而提升性能
- 通过消除手动优化（如记忆化）需求，基于信号的渲染减少了不必要的重渲染、计算工作量和包体积
- 信号框架中的控制流组件（如Preact的`Show`和`For`）能进一步优化响应性，仅更新UI中受影响的部分
- 基于状态的渲染仍适用于重渲染成本低的小型应用，而基于信号的渲染在大型、复杂或高频更新场景中表现卓越
- 从状态驱动到信号驱动的范式转变简化了心智模型，使代码与实际数据流保持一致，从而构建出更快、更易维护的应用