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

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

0x1 React 的历史与应用

1. 应用场景

   1. 前端应用开发，如 Meta、Ins、Netflix 的网页版
   2. 移动原生应用开发，如 Ins、Discord
   3. 结合 Electron 进行桌面应用开发

2. 发展历史

   1. Facebook 引入了 xhp 框架，其组合式组件的思想启发了 React 的设计

   2. Jordan Walke 创造了 React 的原型—— FaxJS

      FaxJS 的四个特性：

      1. 既可在服务端渲染，也可在客户端渲染
      2. 响应式**(Reactive)**：当状态变更时，其 UI 也会自动更新
      3. 高性能
      4. 结构化

   3. 在 Facebook 收购 Ins 后，Jordan Walke 创造了 React

0x2 React 的设计思路

单向数据流：父组件向子组件单向传递数据

1. UI 编程痛点

   1. 状态更新时，UI 不会自动更新，需要手动调整
   2. 欠缺基本的代码层面的封装和隔离
   3. UI 之间的数据依赖关系需要手动维护

2. 转换式与响应式

   1. 转换式：给定输入，求解输出。如：编译器

   2. 响应式：监听事件，消息驱动。如：监控系统

      响应式系统：

3. 响应式编程

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

4. 组件化的特点

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

5. 组件设计

   1. 组件声明了状态和 UI 的映射
   2. 组件有 Props(外部传入)/State(内部私有) 两种状态
   3. 组件可由其他组件拼装而成

6. 组件代码结构

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

0x3 React (hooks)的写法

import React, { useState, useEffect } from 'react'
function Example() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        document.title = `${count} times`;
    })
    return (
        <div>
        	<p>You clicked { count } times</p>
           <button onClick={ () => setCount(count+1) }>
               Click me
           </button>
        </div>
    );
}

1. 在 React 中声明一个新状态时，需要手动调用 useState

2. 对 useState 传入一个初始值后，返回一个状态

3. 对 useEffect 传入一个函数和一个数组。数组是状态的数组，称作依赖项。“副作用”函数

   副作用：代表除了基础函数操作外，还可以进行网络请求、更新 DOM、存储数据等功能

0x4 React 的实现

1. JSX/TSX 中的代码不符合 JS/TS 的标准

   • 通过转译成一般 JS/TS 代码

2. 返回的 JSX 发生改变时如何更新 DOM

   • 虚拟 DOM（用于平衡 Diff 算法更少的更新次数和更快的计算速度）

     Diff 算法：

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

3. Props/State 更新时要重新触发 render

0x5 React 状态管理库

1. React 状态管理库

   将组件的状态从根节点中抽离出来，集中到 UI 外部统一管理，构成 React 状态管理库

   如：redux、xstate、mobx、recoil

2. 状态机

   在当前状态下，接受外部事件后，迁移至下一个状态

0x6 应用级框架科普

1. next.js——React 开发框架
2. modern.js——全栈开发框架
3. blitz——无 API 思想的全栈开发框架