React 的历史与应用

历史

2010 年，Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。

2011 年，Jordan Walke 创造了 FaxJS，也就是后来的 React 原型。

2012 年，在 Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用，Jordan Walke 基于 FaxJS 的经验，创造了 React。

2013 年，React 正式开源，在 2012 JSConf 上 Jordan Walke 介绍了这款全新的框架。

2014 年 - 今天，生态大爆发，各种围绕 React 的新工具 / 新框架开始涌现。

应用

0. 前端应用开发

   如 Facebook、Instagram、Netfix 网页版

1. 移动原生应用开发

   如：Instagram、Discord、Oculus

2. 结合 Electron，进行卓面应用开发

React 的设计思路

UI 编程痛点

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

响应式与转换式

转换式系统：给定【输入】求解【输出】。

编译器、数值计算

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

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

监控系统，UI 界面

转换式系统 ≠ 响应式系统

响应式编程

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

组件化

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

状态归属问题

多个组件共享一个数据，需要将这个数据定义在这些组件共同的祖先组件上。

组件设计

0. 组件声明了状态和 UI 的映射
1. 组件有 Props（外） / State（内） 两种状态
2. “组件” 可由其他组件拼接而成

生命周期

React（hooks）的写法

0. hooks 都是以 set 开头的函数
1. 不要在循环、判断语句中使用 hooks

React 的实现

Problems

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

如何diff？

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

React 状态管理库

核心思想

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

推荐

• redux
• xstate
• mobx
• recoil

应用级框架科普

0. Next.js
1. Modern.js
2. Blitz