这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天

一、本堂课重点内容：

• React的历史与应用
• React的设计思路
• React(hooks)的写法与React实现
• React状态管理库及应用级框架科普

二、详细知识点介绍：

React的历史与应用

应用

• 前端应用开发

• 移动原生应用开发

• 结合Electron，进行桌面应用开发

历史

产生需求 => 诞生应用

2010年：启发

php生态中引入xhp框架，首次引用组合式组件思想

2011年：原型

FaxJS诞生

• 客户端/服务端渲染
• 响应式
• 高性能
• 组件化

2012年：诞生

基于FaxJS，诞生React

2013年：开源：

作者概述React：

A JavaScript library for building user interfaces.

重点是library，并不完全是框架。

2014年至今：生态大爆发

各种围绕React生态涌现的应用及框架，体现React体系结构的成功

React的设计思路

原生JavaScript中UI编程的难处

• UI不会自动更新，需要手动调用DOM：麻烦
• 欠缺基本代码的封装和隔离，没有组件化：维护难
• 数据依赖关系维护难

前端编程特点

• 一般不需要复杂求解

• 需要监听事件

由此，提出响应式系统

组件化

• 组件是组件的组合

• 组件有外部不可见的状态（类似于private属性）

• 有props（外部）/state（私有）两种状态

• 父组件可传递状态至组件内部（接口化、层级控制的思想）

状态归属问题

一些公共属性引起的状态上升，会导致如Root等高层节点承载过多状态，不合理

于是引入状态管理库

局部性状态放在一起，提高代码聚合性

小结

React是单向数据流

React基本流程： 组件有自己的state，接收外部的props，返回一个UI

React(hooks)的写法与React实现

hooks写法入门

• useState

传入初始值，返回状态，和set改状态的函数，可调用该函数实现状态修改

• useEffect

有副作用的函数（影响外部组件属性），则使用useEffect

传入一个函数和一个状态数组，叫依赖项。该函数在mount时，和依赖项被set时执行

• 不在循环/条件/嵌套函数中调用Hook

React实现

问题及解决

• JSX不符合JS标准语法

转译：转成符合语法的代码

• 返回的JSX改变时，如何更新DOM

虚拟DOM，赋予React声明式API：匹配关系，实现自动更新。

• state/props更新时，要重新触发render函数

要更新次数少，且计算速度快，所以牺牲理论最小diff，换取时间：Heuristic O(n) Algorithm

diff：

不同类型的元素：替换

同类型的DOM元素：更新

同类型的组件元素：递归

React状态管理库及应用级框架科普

状态管理库

核心思想：将状态抽离到UI外部进行统一管理

坏处：降低组件复用性，该组件与管理库store强耦了

状态管理库：

redux、xstate、mobx、recoil

状态机：

根据当前的状态，及收到的外部事件，迁移到下一个状态

应用级框架

next.js：开发工具链完善，高效

modern.js：全栈开发框架，内置很多即用工具

Blitz：无API思想的全栈开发框架，适合前后端结合的小团队项目

三、课后个人总结：

由于今天的课程以介绍为主，于是调整了一下笔记结构，以记录、理解知识点为主。

在今天的课堂中，主要认识了响应式对于前端编程的好处：无需重复调用，实现监听即可，还跟着老师的讲解逐步认识React编程。我认识到react是一个生态很好的一个框架，而且如今也在继续发展着。react中的组件化思想是十分契合前端编程的，要学好react编程，必须学好组件化思想以及响应式系统。

笔记如有错误，欢迎指出，谢谢。