背景
如图有一个容器中有三个 Tile，如下定义容器的三种显示状态：三个 Tile 可以并列显示在一排时的状态为 Normal；当三个 Tile 无法一排显示在一排，其中有一个或者两个 Tile 处于 Overflow 的状态为 Collapsed；三个 Tile 显示在多排的状态为 Expanded。
处于 Collapsed 状态时，可以点击 Show more 变到 Expanded 状态，同理处于 Expanded 状态时点击 Show less 可以变回 Collapsed 状态。拖动窗口大小时可以从 Expanded/Collapsed 到 Normal 状态下相互转化。
Bug 是：从 Expanded 变至 Normal 时，Show less 不应该显示。
分析
通过上述的分析，显然这是一个有限元状态机问题，该问题总共有如下三种状态，Collapsed 和 Expanded 之间通过 Show more / Show less 相互转换，Collapsed/Expanded 和 Normal 之间通过 Resizing 相互转换。
分析代码逻辑发现，Show more / Show less 按钮是通过一个 expandable 状态控制的，但是代码的作者忽略了 Expanded 到 Normal 的状态转换，从而导致这种转换发生时 expandable 状态没有被更新。解决这个问题总共使用了不到两个小时，用了 4 个番茄时钟，其中两个 3 个时钟花在了梳理原来的逻辑上，逻辑梳理清楚后分析处这是一个状态机问题，后面修复就简单了。
总结
本来这并不是一个特别头疼的 Bug，也不足以记录，但是经过分析之后其背后隐藏着一个状态机模型。这种发现是对重视理论基础，特别是重视算法的程序员的馈赠，至少我很享受这种发现所带来的乐趣。其实编程的本质还是抽象，抽象的基础是建模，建模的基础那就是数据结构和算法了。
综上述，我们应该坚持学习算法和数据结构。
其实就是找个继续刷算法的理由罢了，本文完(又水了一篇:狗头!
参考资料
最后附上一些关于状态机的资料和几道 LeetCode 题目：