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

这是我参与「第四届青训营 」笔记创作活动的第 1 天

React 的历史与应用

应用

前端应用开发：Facebook，Instagram，Netflix 移动原生应用：Discord，Oculus 结合 Electron 进行桌面应用开发

历史

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

React 的设计思路

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

React(hooks)的写法

import React, { useState } from "react";

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

  return (
    <div>
      <p>click{count} times</p>
      <button onClick={() => setCount(count + 1)}>click</button>
    </div>
  );
}

import React, { useState } from "react";

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

  useEffect(() => {
    document.title = `Click ${count} times`;
  });

  return (
    <div>
      <p>click{count} times</p>
      <button onClick={() => setCount(count + 1)}>click</button>
    </div>
  );
}

React 的实现

遇到的问题？ JSX 不符合 js 语法 返回的 JSX 发生更新时，如何改变 dom State 和 Props 更新时，要重新触发 render 函数 实现 JSX

Virtual DOM 声明式编程

Diff 算法 完美的最小 Diff 算法，需要 O(n3)的复杂度。 牺牲理论最小 Diff，换取时间，得到了 O(n)复杂度的算法: Heuristic O(n) Algorithm 启发式 O(N)算法 不同类型的元素->替换 同类型的 dom 元素->更新 同类型的组件元素->递归

React 状态管理库

将状态抽离到 UI 外部统一进行管理 当前状态，收到外部事件，迁移到下一个状态

应用级框架

Next.js

Modern.js

Blitz