状态机与状态图

• https://statecharts.github.io/
• https://github.com/davidkpiano/xstate

• https://sketch.systems/

• How to model the behavior of Redux apps using statecharts (链接备份)
• Are statecharts the next big UI paradigm?
• Statecharts - Controlling the behavior of complex systems
• Patterns for using React with Statechart-based state machines (链接备份)
• The state reducer pattern (链接备份)
• 高效設計 UI 狀態、以及無痛與工程師溝通的 FSM 表格 (链接备份)

不要混淆状态和数据

状态图是静置的。 数据是动态的。

状态图解决什么问题

显示定义 Model 的当前状态和未来状态。可预测未来状态。 以高层视角去理解应用的内部情况。

(链接备份)