第六届字节跳动青训营笔记 响应式系统与 React| 青训营

73 阅读1分钟

1. React 的历史与应用 - 介绍 React 的发展历史以及应用场景。

image.png

image.png

image.png

image.png

2. React 的设计思路

2.1 UI编程痛点

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

2.2 响应式与转换式

image.png

image.png

image.png

2.3 响应式编程

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

2.4 组件化

image.png

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

组件设计

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

组件代码会是什么样子?

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

2.5 生命周期

image.png

3. React的实现

3.1 Problems

image.png

image.png

image.png

3.2 How to Diff?

image.png

image.png

4. React状态管理库

4.1 核心思想

image.png

4.2 推荐

image.png

4.3 状态机

image.png

4.4 Modern.js/Reduck

5. 1. 应用级框架科普

image.png