React 的历史与应用

React 是一个 JavaScript 库

React : A JavaScript library for building user interfaces.   ——Jordan Walke

• 应用场景：

  • 前端应用开发，如 Facebook、Instagram、Netflex 网页版
  • 移动原生应用开发，如 Instagram、 Discord、Oculus
  • 结合 Electron，进行桌面应用开发
  • 3D开发：react-three-fiber

• React 的历史

  • 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 的设计思路

• 原生 JavaScript UI 编程痛点

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

• 响应式与转换式

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

• 响应式系统

事件 -> 执行既定回调 -> 状态变更

• 响应式的前端 UI 编程：

事件 -> 执行既定回调 -> 状态变更-> UI 更新

• React 响应式编程特点

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

• 组件化

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

• 组件状态归属问题

  • 共享状态归属于两个组件节点的最近祖先节点，即状态提升
  • React 是单向数据流，永远是父组件给子组件传递状态，子组件只能调用函数更改状态
  • 使用状态管理库如 redux 解决状态不合理提升的问题
  • 如何修改 DOM : 将 JSX 文件转义为 JS 文件、利用虚拟 DOM 树和 diff 算法来更新 DOM

• 组件设计

  • 组件声明了状态和 UI 的映射
  • 组件有 props 和 state 两种状态
  • 组件可由其他组件拼装而成

• 组件特点：

  • 组件内部拥有私有状态 state
  • 组件接受外部的 props 状态提供复用性
  • 根据当前的 state 和 props 返回一个 UI

React Hooks 的写法

• 最常用的两个 Hooks 是 useState 和 useEffect
• useState：传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改

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

• useEffect：两个参数，一个是要执行的函数，一个是依赖项数组（可以不传依赖性）。有副作用的函数要传入到 useEffect 来执行。副作用表示除了单纯的计算之外还要做其他的事情，比如网络请求、更新 DOM 、localStorage 数据等。

import React, { useState, useEffect } from 'react';
const Example = () => {const [count, setCount] = useState(0);// 使用一个副作用，传入的[count]数组使得此副作用只有当count变量改变时才会被调用useEffect(() => {// 副作用：Update the document title using the browser APIdocument.title = `You clicked ${count} times`;}, [count]);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

• Hooks 的使用规则：
  • 只在最顶层使用 Hooks，不要在循环，条件或嵌套函数中调用 Hooks，确保总是在 React 函数的最顶层以及任何 return 之前调用他们。
  • 只在 React 函数中调用 Hooks，不要在普通的 JavaScript 函数中调用 Hooks，可以在 React 的函数组件中调用 Hooks，可以在自定义 Hooks 中调用其他 Hooks

React 的实现

• React 是不能直接在浏览器中运行的，有这些问题

  • React 的 JSX 语法不符合 JavaScript 标准语法
  • 返回的 JSX 发生改变时，如何更新 DOM
  • state/props 更新时要重新触发 render 函数

• 如何实现

  • 将 JSX 文件转译（transpile）成 JS 文件
  • 利用虚拟 DOM 树
    • 真实 DOM （Document Object Model）是浏览器创建页面的文档对象模型
    • 虚拟 DOM 树是在 JS 内存中维护的一个对象，具有和 DOM 类似的树状结构，并和 DOM 可以建立一一对应的关系
    • 利用虚拟 DOM 就不用操作真实 DOM 提供的 API 来修改 DOM 了：它赋予了 React 声明式的 API，告诉 React 希望让 UI 是什么状态，React 就确保 DOM 匹配该状态，前端工程师便可以从属性操作、事件处理和手动 DOM 更新这些操作中解放出来
  • 利用 Diff 算法
    • 状态改变时，先更新虚拟 DOM 树，而不是直接更新 DOM 树，通过 Diff 算法，求出最少要更新的节点，然后再去更新真正的 DOM 树
    • 完美的最小Diff 算法，需要O(n^3)的复杂度；牺牲理论最小 Diff，换取时间，得到了O(n)复杂度的算法
      | 不同类型元素 | 同类型元素 | 同类型的组件元素 |
      | — | — | — |
      | 替换 | 更新 | 递归 |

React 状态管理库

• 核心思想：将状态抽离到 UI 外部进行统一管理
• 状态管理库的弊端：UI 依赖于外部的一个状态管理库会降低代码的复用性，因此状态管理库总是出现在业务代码中
• 常见状态管理库：redux、xstate、mobx、recoil
• 状态机：当前状态收到外部事件，迁移到下一个状态