React中理念梳理

文章总结来自：React官方文档和React设计原理（作者：卡怂）

一、UI=f(state)

在现代前端库中，公式UI=f(state)囊括了大部分实现原理，意思是框架内部运行机制根据当前状态渲染视图，其中：

• UI：宿主环境的视图
• f：框架内部运行机制
• state：当前视图状态

React原理也依据上述公式。React开发团队认为，UI与逻辑存在耦合的部分，这个耦合部分就是组件，开发者可以：

1. 在UI上绑定事件；
2. 在状态变化后改变UI的样式或结构。

二、自变量与因变量、副作用、纯函数

自变量与因变量：若y=f(x)，x变化会导致y变化，则x为自变量、y为因变量。在前端中，自变量由getter和setter两部分组成，自变量变化会导致“依赖它的因变量”变化。

依据有无副作用人为把因变量分为：无副作用因变量和有副作用因变量。

副作用：“副作用”是函数式编程中的概念，是指“在函数执行过程中产生对外部环境的影响”。

React设计理念：假设你编写的所有组件都是纯函数。

如果一个函数同时满足：1️⃣相同输入始终获得相同输出2️⃣不会修改程序的状态或引起副作用，则称该函数为纯函数（相同的输入总返回相同的输出且无副作用）。

保持组件纯粹.png

这是一个纯函