逻辑与UI

几乎所有的现代前端框架的实现原理都可以用下面这个公式来概括：

UI = f(state)

• state 代表 “当前视图状态”

• f 框架内部运行机制

• UI 视图，宿主环境的视图

为了实现 UI 与 逻辑 的分离，需要存放一种 UI 与 逻辑的 松散组合单元，这就是 组件。

组件 如何实现逻辑与UI的关联？

在初中时 学习函数时，知道了自变量和因变量，我认为这两个概念用在前端中依然合适。

在react中，最常用的hook是 useState，我们用state来定义组件自身的状态，用 setState 来改变state的值。

相当于 state就是我们的自变量，setState 就是我们用来改变自变量的方式。

在数学中，自变量的改变会引起其因变量的改变， 那么UI 就是我们的因变量，state的改变会引起依赖该state的视图变化。

纯函数

纯函数的定义很简单，对于一个确定的输入，总有一个确定的输出， 并且在函数执行过程中，不修改程序的状态或者引起副作用。

举个例子来说，虽然输入的 x 是确定值，但是在函数执行过程中，引入了随机数字，造成结果不固定。因此它不是纯函数。

function CalcRandom(x) {
    return 2x + 1 + Math.random();
}<