Lesson 10 响应式系统与 React

VideoLink：

CoursewareLink：响应式编程与 React.pptx

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。
2013年 React 正式开源，在 2013 JSConf 上 Jordan Walke 介绍了这款全新的框架
2014年生态大爆发，各种围绕 React 的新工具/新框架开始涌现：

React 的设计思路

UI 编程痛点

状态更新，UI 不会自动更新，需要手动地调用 DOM 进行更新。
欠缺基本地代码层面的封装和隔离，代码层面没有组件化。
UI 之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到 "Callback Hell"

响应式与转换式

转换式：给定输入求解输出。例如编译器，数值计算
响应式：监听事件，消息驱动。例如监控系统，UI 界面
- 事件 --> 执行既定的回调 --> 状态变更

React 的解决

状态更新，UI 自动更新
前端代码组件化，可复用，可封装
状态之间的互相依赖关系，只需要声明即可

组件化

组件是组建的组合/原子组件
组件内拥有状态，外部不可见
父组件可将状态传入组件内部

状态归属问题

React 是单向数据流，父组件传子组件，子组件通过执行函数来影响上层组件，但是本质上还是单向数据流
解决状态不合理上升的问题，可以采用状态管理库，但过多使用会影响复用

组件设计

组件声明了状态和 UI 的映射
组件有 Props/State 两种状态
“组件”可由其他组件拼装而成

组件代码

组件内部拥有自由状态 State
组件接受外部的 Props 状态提供复用性
根据当前的 State/Props，返回一个 UI

声明周期

React (hooks) 的写法

React.useState 是 React JavaScript 库中的一个钩子（hook），允许您在函数式组件中添加状态（state）。在引入钩子之前，状态只能通过使用 this.state 机制在类组件中进行管理。像 useState 这样的钩子被引入，以便在函数式组件内更轻松地管理组件状态和其他行为。

useState 钩子返回一个带有状态值和更新状态的函数。它接受一个初始值作为参数，并返回一个包含两个元素的数组：当前状态值和一个更新该值的函数。

import React, { useState } from 'react';

function ExampleComponent() {
  // 使用初始值 0 声明一个名为 "count" 的状态变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

React.useEffect 是 React JavaScript 库中的另一个钩子（hook），用于处理副作用操作，比如数据获取、订阅、手动 DOM 操作等。在函数式组件中，由于没有生命周期方法（如 componentDidMount 和 componentDidUpdate），您可以使用 useEffect 来处理组件渲染周期中的副作用。

useEffect 接受两个参数：一个是副作用函数，另一个是一个数组，用于指定影响副作用执行的依赖项。当组件渲染时，副作用函数会被调用。如果指定了依赖项数组，则当数组中的依赖项发生变化时，副作用函数会被重新调用。如果没有指定依赖项数组，副作用函数会在每次组件渲染时都被调用。

import React, { useState, useEffect } from 'react';

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

  // 使用 useEffect 处理副作用
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // 仅在 count 发生变化时重新调用副作用函数

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

React 的实现

Problems

JSX 不符合 JS 标准语法
返回的 JSX 发生改变时，如何更新 DOM
State/Props 更新时，要重新触发 render 函数

以下均为解决方法

JSX -> JS

Virtual DOM

Virtual DOM 是一种用于和真实 DOM 同步，而在JS 内存中维护的一个对象，它具有和 DOM 类似的树状结构，并和DOM 可以建立一一对应的关系。

DOM 不是在 JS 内存中，而是在浏览器中

它赋予了 React 声明式的 API: 您告诉 React 希望让 UI 是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。

Update DOM

How to diff?

A tradeoff between update times and calculation speed
完美的最小 diff 算法，需要 $O(n^3)$ 的时间复杂度
牺牲理论最小 diff，换取时间，得到了 $O(n)$ 复杂度的算法—— Heuristic O(n) Algorithm

不同类型的元素	替换
同类型的 DOM 元素	更新
同类型的组件元素	递归

React 状态管理库

将状态抽离到 UI 外部进行统一管理

Redux 中文文档 · Redux

XState - JavaScript State Machines and Statecharts

关于 MobX | MobX中文文档 | MobX中文网

Recoil - React 状态管理库

应用级框架科普

Next.js

硅谷明星创业公司 Vercel 的 React 开发框架，稳定，开发体验好,支持 Unbundled Dev，swc 等其同样有 serverless 一键部署平台帮助开发者快速完成部署。口号是"Let's Make web Faster"

Modern.js

字节跳动 web infra 团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间

Blitz

无 API 思想的全栈开发框架，开发过程中无需写API 调用与 CRUD 逻辑，适合前后端紧密结合的小团队项目。

Lesson 10 响应式系统与 React 学习笔记 ｜ 青训营