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

旺崽
61 阅读1分钟

响应式系统与 React

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

React 的历史与应用

  1. 前端应用开发，如 facebook、instagram 等
  2. 移动原生应用开发，如 discord，oculus 等
  3. 结合 electron 进行桌面应用开发
  4. 3D 场景开发

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

React 的设计思路

UI 编程痛点

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

响应式与转换式

在这里插入图片描述

在这里插入图片描述

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

组件化

在这里插入图片描述
  1. 组件是组件的组合 / 原子组件
  2. 组件内拥有状态，外部不可见
  3. 父组件可将状态传入组件内部

组件设计

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

状态归属问题

在这里插入图片描述

在这里插入图片描述

生命周期

在这里插入图片描述

React 的实现

问题一

JSX 不符合 JS 标准语法

在这里插入图片描述

问题二

返回的 JSX 发生改变时，如何更新 DOM

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

avatar
文章
阅读
粉丝