React 第一站：什么是React

EpicMo

2023 年 08 月 21 日

195 次浏览

暂无评论

1671字数

折腾日志学习小记

<div class="tip share">请注意，本文编写于 105 天前，最后修改于 105 天前，其中某些信息可能已经过时。</div>

## 提醒

这是一个不对内容负责的**随笔**，仅记录自己学习React的心路历程和路线。博主也并非从事前端开发，只是想能够开发一些简单的网页和前端项目即可。最终 的目标是能够做一个软件授权管理后台。

</div>

## React是个啥？

React 对于我而言的话，给我的第一印象就是这是一个比较流行的框架... ...只知道现在是React和Vue的天下... ...

于是抱着这个心态，我懵懵懂懂的开始了对于React的学习。

## JS函数式思想

参考资料：React学习手册前三章

</div>

对于一个编程的过程来说，有两种思路，一种是声明式，一种是命令式。

对于传统的OOP来说 (博主主后端)，或者说常见的后端语言中（JS也算吧哈哈哈），一般都是面向某个过程进行描述。

```js
let target = "This is the string demo";
let result = "";
for (let i = 0; i < target.length; i ++){
    if (target[i] === " "){
        result += "-";
    }else{
        result += target[i];
    }
}
```

也就是我们对一个命令的完成是命令式的，但是我们函数式的思想是采用函数构建这个字符串：

```js
let result = target.replace(/ /g, "-");
```

也就是我们抽象了 replace 这个过程，作为一个固定的 Action。

### 纯函数

函数式是纯函数的，也就是：

![描述图](https://www.epicmo.cn/usr/uploads/2023/08/20994419.png)

我们的Action是纯函数的，输出完全取决于输入，且不会影响外部的变量。

### 不可变性

函数会根据输入做一些处理，但是不能改变输入者本身的性质。

例如：

```js
var addColor = (title, colors) => {
	colors.push({title: title});
	return colors;
}
```

但是这样的话，我们的输出和输入的相同的对象，这意味着我们的colors被改变了。

```js
var addColor = (title, array) => array.concat({title})
```

而这样的话，concat方法就会使得我们在副本上添加了 title，没有影响原来的对象。

### 可测试性

顾名思义，React的函数式风格使得输出完全取决于输入，这样方便我们进行Mock，对于测试来说也十分友好。

### 数据转换

可以通过 `map` ， `reduce`，`Object.Assign` 函数完成各类的数据类型的转换。

### 高阶函数

通过函数返回函数的模式，完成一个高级函数。高价函数类似一个状态机，可以存储信息在某个函数中。

```js
const invokeIf = (condition, fnTrue, fnFalse) => (condition) ? fnTrue() : fnFalse()
```

### 合成

我们也可以把一个过程合成在某个函数中，例如：

```js
const both = compose (
	process1,
	process2
)
both(new Date())
```

最后修改：2023 年 08 月 21 日

如果你觉得文章帮到你了，请以沫喝杯奶茶吧~

React 第一站：什么是React

EpicMo • 2023 年 08 月 21 日

React 第一站：什么是React

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Ubuntu安装网易云音乐

Fiddler EveryWhere 365 Crack 办法

记一次Bat编写

Ubuntu下Dash to dock在锁屏后会出现重叠的解决方案

Nginx 配置 Stable Diffusion 反向代理

我应该怎么用我的Redis（二）？

我应该怎么用我的Redis（三）？

Clash 通过 WebApi 切换节点

博客迁移

我应该怎么用我的Redis（四）？

React 第一站：什么是React

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

React 第一站：什么是React

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款