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

React 的历史与应用

应用场景

• 前端应用开发
• 移动原生应用开发
• 结合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 介绍了这款全新的框架：
  “React——a JavaScript library for building user interfaces.”
• 2014年 - 今天，生态大爆发，各种围绕 React 的新工具/新框架开始涌现

---

React 的设计思路

原生JS——UI 编程痛点

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

转换式系统：给定【输入】求解【输出】
响应式系统：监听事件，消息驱动

React 的设计与实现 - 响应式编程

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

React 的设计与实现 - 组件化

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

React是单向数据流

React 的设计与实现 - 组件设计

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

---

React（hooks）的写法与 React 实现

React（hooks）的写法

import React, { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClikc={() => setCount(count + 1)}>
                Click me
            </button>
            </p>
        </div>
    );
}

React 的实现 - Problems

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

React 的实现 - Problem1

转译一下

React 的实现 - Problem2

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

React 应用级框架科普

NEXT.JS

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

MODERN.JS

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

Blitz

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