在目前的前端社区中，MVVM、模型驱动视图等概念已经非常流行。React/Vue等框架可以算是代表。虽然有过React/Vue的使用经验，理解MVVM、状态机等核心概念，但一直未能很好地应用。直到前几天接手了一个组件开发需求，在写之前试着仔细分析了一下，才突然想通了它们之间的联系。emmm……内容比较浅，算不上什么大法宝。这更多是个人的看法。就我个人而言，前段时间我对如何编写好的代码感到困惑。在学习了《重构》、《代码整洁之道》等知识后，我确实变得更好了。但是写代码总是需要重构才能更好，这也是很麻烦的，于是就有了下面的思考。前端与状态在目前的前端开发中，状态的管理是重中之重。使用React/Vue等MVVM框架，通过组件化和自动绑定，可以有效降低前端开发的复杂度。MVVM一提到状态就不得不提到MVVM框架，而MVVM框架的核心不是双向绑定或者依赖收集，而是：状态决定视图。代码中描述：View=ViewModel(Model)理想情况下，ViewModel是一个纯函数，给定相同的Model，产生相同的View。随着前端的发展，Web应用的状态管理也变得越来越复杂。但是由于前端的一些特点：开源代码要求透明，不保存用户数据，这也决定了前端只负责整个Web应用的可视化和交互层。是的，后端必须做严格的验证，不要轻信任何前端的要求。因此，前端的核心工作就是提供友好的人机交互界面。当然，这也符合前端的广义定义。MVVM的出现可以有效提高前端开发的效率和质量，从而实现规模化开发和应用。Complexity在《代码大全2》一书中，有一句话让我印象深刻：软件工程的本质就是管理复杂性。仔细一想，的确如此。前端开发自然也属于软件开发，管理复杂度恰恰是前端的核心问题。有限状态机那么如何更好地管理前端软件的复杂性呢？React的状态机思想给出了自己的答案。状态机是我在学习计算机时经常听到的一个概念。比如在学习React的时候，我会提到React是一个状态机。听团队分享编译原理的时候，也会听到状态机。所以特地去研究了这个概念。有限状态机在维基百科上的描述如下：这些states动作和动作等行为的数学模型。有限状态机不是一个复杂的概念。简单地说，它具有三个特点：状态（state）的总数是有限的。在任何时刻，都只有一种状态。在一定条件下，会从一种状态过渡到另一种状态。对于JavaScript来说，这意味着许多对象都可以写成有限状态机。启示随着对state-determinedview和statemachine这两个概念的学习和思考，有了一个新的思路：state决定view，Action负责完成状态间的转换。写出好的代码的核心就是用最合适的状态来描述界面，用最合适的动作来完成状态之间的转换。emmm...很简单的一个概念，但是之前一直没有想清楚。总结随着对这个概念的理解，我的开发思路也越来越清晰。在自己写代码之前，我会想一系列的问题，在开始之前想清楚：这个页面有几种状态（初始化状态？成功状态？失败状态？错误状态？）需要什么参数来描述这些状态，什么时候去改变状态，需要改变哪些部分把这些问题想清楚之后，剩下的工作就是顺着思路，完成数据和UI部分。
