第九节课《响应式系统与 React》，本节课分为四小节，分别为React的历史与应用、React的设计思路、React(hooks)的写法与React实现及React状态管理库与应用级框架科普，课程链接如下：

响应式系统是一种能够根据不同的设备、屏幕大小和用户行为自动调整布局和功能的系统。React是一个用于构建用户界面的JavaScript库，它使用了响应式系统的概念来创建可重用的UI组件。在React中，可以使用组件来构建整个应用程序的用户界面。每个组件都有自己的状态和属性，当状态或属性发生变化时，React会自动重新渲染组件以反映这些变化。这种自动化的更新机制使得React非常适合构建响应式系统。

React的历史与应用

历史

前端应用开发：如：FaceBook、Instagram、Netflix
移动原生应用开发：如：Instagram、Discord、Oculus
桌面应用：结合 Electron 开发

历史

2010年 facebook 在其 php 生态中,引入了 xhp 框架,首次引入了组合式组件的思想,后来启发了 React 的设计
2011年 Jordan Walke 创造了 FaxJS,也就是后来的React原型
2012年在 Facebook收购 Instagram 后,该 FaxJS 项目在内部得到使用,Jordan Walke基于 FaxJS 的经验正式创造了 React

图片8.png

2013年 React 正式开源,在2013 JSConf 上 Jordan Walke 介绍了这款全新的框架: React

图片9.png

2014年至今生态大爆炸,各种围绕 React 的新工具/新框架不断涌现

React的设计思路

响应式与转换式系统:

响应式系统---监听事件消息驱动,例如实时监控系统、UI界面
转换式系统---给定[输入]求解[输出],例如编译器、数值计算

响应式编程:

1.状态更新,相应的数据自动更新
2.前端代码组件化,可复用,可封装
3.状态之间的相互依赖关系,只需申明即可,不用手动维护关系

组件化:

1.组件是组建的组合\原子的组合
2.组件内拥有状态,外部不可见
3.父组件可将状态传入组件内部

组件设计:

1.组件声明了状态和UI的映射

2.组件有 Props/State 两种状态

3."组件"可由其他组件拼装而成

生命周期:

1.Mounting 挂载时

2.Updating 更新时

3.Unmounting 销毁时

React(hooks)的写法

1.useEffect() 副作用 hock 一般只执行一次 副作用：一个操作会更改组件外部的状态，该操作即是副作用。

import { useEffect } from 'react';

useEffect(() => {
    // 组件挂载/更新时，执行的副作用操作

    return () => {
        // 组件卸载时执行的副作用操作/清除订阅
    }
})

2.useState() 更改状态 hock

import { useState } from 'react';

const [count, setCount] = useState(0);

要注意的是：不要在循环、条件或嵌套函数中调用 Hook。

React实现

如何解决 JSX 不符合 JS 的标准的问题？
- 将 JSX 转译为 JS
返回的 JSX 发生改变时，如何更新 DOM ？
- JSX 的改变会引起 Virtual DOM 的改变
- 对改变前后的 Virtual DOM 进行 Diff（How to Diff?）
- 根据 Virtual DOM 与 DOM 的映射关系，进而更新 DOM
react 组件的 render 函数，在哪些情况下，会被重新执行？
- 当组件的状态（Props/State）发生改变时，组件和其所有的子组件，会递归地重新执行 render 函数。

How to Diff?

render 函数执行速度（即 diff 速度）要足够快 <-- TradeOff --> DOM 更新的次数/节点足够少（即 diff 节点足够少）。完美的最小 Diff 算法，需要 O(n^3) 的复杂度。牺牲理论最小 Diff,换取时间，得到 O(n) 复杂度的算法：Heuristic O(n) Algorithm

虚拟的DOM修改状态后,类型会发生改变：

若真实的DOM和虚拟的DOM不同的类型会替换,然后会将类型不同的虚拟DOM子节点全部替换
若类型相同的DOM元素,会更新
若同类型的组件元素,会递归

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

React 状态管理库

React 状态管理库 ——核心思想：将状态抽离到 UI 外部进行统一管理，将状态保存在 Store。

状态全部抽离到 UI 外部的弊端：组件与 Store 强耦合，不适用于 library 的开发，在业务代码中可以将组件公用状态防止在 Store 中。

推荐使用 redux、 xstate、 mobx、 recoil。

应用级框架科普

1.NEXT.JS框架 2.MODERN.JS框架 3.Blitz框架

《响应式系统与 React》课程笔记 | 青训营