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

响应式系统与 React

React 的历史应用

应用：

前端应用开发，如 Facebook、Instagram、Netflix 网页版
移动原生应用开发，如 Instagram，Discord，Oculus
结合 Electron，进行桌面应用开发

React 的设计思路

UI 编程的痛点及解决思路

状态更新，UI 不会自动更新，需要手动地调用 DOM API 进行更新 —— 状态更新，UI 自动更新
欠缺基本的代码层面的封装和隔离，代码层面没有组件化 —— 前端代码组件化，可复用，可封装
UI 之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到”Callback Hell“ —— 状态之间的互相依赖关系，只需声明即可

响应式编程

响应式编程.png

组件化

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

组件设计：

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

组件代码：

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

声明周期

React（hooks）的写法

useState 和 useEffect 的用法：

import React, { useState, useEffect } from "react";
function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = React.useState(0);
  // Similar to componentDidMount and componentDidUpdate:
  React.useEffect(() => {
    // Update the document titlenusing the browser API
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

State Hook

State Hook 让函数组件也可以有state状态，并进行状态数据的读写操作
语法: const [xxx, setXxx] = React.useState(initValue)
useState()说明：
- 参数: 第一次初始化指定的值在内部作缓存
- 返回值: 包含2个元素的数组，第 1 个为内部当前状态值，第 2 个为更新状态值的函数
setXxx() 2 种写法：
- setXxx(newValue): 参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态
- setXxx(value => newValue): 参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值

Effect Hook

Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
React 中的副作用操作：
- 发 ajax 请求数据获取
- 设置订阅 / 启动定时器
- 手动更改真实 DOM

语法和说明：

useEffect(
  () => { 
    // 在此可以执行任何带副作用操作, 即 componentDidMount() 或 componentDidUpdate()
    
    return () => {
      // 返回的这个函数在组件卸载前执行, 即 componentWillUnmount()
      // 在此做一些收尾工作, 比如清除定时器/取消订阅等
    }
  },
  // 如果指定的是[], 回调函数只会在第一次 render() 后执行
  [stateValue]
)

可以把 useEffect Hook 看做如下三个函数的组合
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()

Ref Hook

Ref Hook 可以在函数组件中存储 / 查找组件内的标签或任意其它数据
语法：const refContainer = useRef()
作用：保存标签对象, 功能与 React.createRef() 一样

React 的实现

存在的问题：

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

Virtual DOM（虚拟DOM）

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

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

Diff

要求：

更新次数少
计算速度快
- 完美的最小 Diff 算法需要 O(n^3) 复杂度
- 牺牲理论最小 Diff，换取时间，得到了 O(n) 复杂度的算法：Heuristic O(n) Algorithm

diff 过程

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

React 的状态管理库

核心思想

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

常用推荐库

redux
xstate
mobx
recoil

应用级框架科普

NEXT.js
- 硅谷明星创业公司 Vercel 的 React 开发框架，稳定，开发体验好，支持 Unbundled Dev，SWC 等，其同样有 Serverless 一键部署平台帮助开发者快速完成部署。口号是"Let's Make WebFaster"。
MODERN.js
- 字节跳动 Web Infra 团队研发的全栈开发框架内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
Blitz
- 无 API 思想的全栈开发框架，开发过程中无需写 API 调用与 CRUD 逻辑，适合前后端紧密结合的小团队项目。

响应式系统与 React | 青训营笔记