从 React 架构开始讲解 useState、useEffect 编程设计

随着前端开发复杂度增加，原生开发模式显得越来越笨重，前端框架也层出不穷。

MVC 和 MVVM

MVC

MVC是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

• Model(模型)：数据。
• View(视图)：用户界面。
• Controller(控制器)：业务逻辑。

MVVM

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

采用双向绑定(data-binding)：View的变动，自动反映在 ViewModel，反之亦然。

React Component class编程

React 是一个 用于构建用户界面的 JavaScript 库，注重于 View 层。

React Component 并没有严格的M，V区分，只是模糊的定义了几块内容：

• state： 数据存放
• render： 用户界面
• setState | forceUpdate： 渲染用户界面

所以我们的代码逻辑是这样的：

1. 定义state
2. 根据state编写render
3. render中加入事件，修改state，且渲染用户界面

以上1，2两步完成后，我