与React的邂逅 | 青训营笔记

86 阅读1分钟

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

本篇笔记是对今天青训营的HTTP课程的归纳总结及个人感悟。

一、 React的历史与应用

  1. 前端应用开发历程例如Facebook、Instagram网页版
  2. 移动原生应用开发例如Instagram、Discord
  3. 结合Electron的桌面应用开发

二、 React的设计思路

A、UI编程痛点

  1. 状态更新:UI不会自动更新,需要手动
  2. 欠缺基本的代码层面的封装和隔离,代码层面没有组件化
  3. UI之间是数据依赖关系,需要手动维护

B、响应式编程

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

C、组件化

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

三、 React(hooks)的写法与React的实现

A、React的实现-Problem 1&2

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

B、React的实现-How to Diff

  1. 不同类型的元素→替换
  2. 同类型的DOM元素→更新
  3. 同类型的组件元素→递归

四、 React状态管理库

核心思想:将状态抽离到UI外部进行统一管理

常用的有Redux、Xstate、Mobx、Recoil