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

React 的历史与应用

• 前置知识

  • HTML，JS，CSS基础
  • 基础的数据结构/算法知识，如二叉树，深度遍历等
  • 会使用浏览器提供的DOM API来修改DOM，更新UI

• 应用

  • 前端应用开发，如Facebook，Instagram，Netflix网页版
  • 移动原生应用开发，如Instagram，Discord，Oculus
  • 结合Electron，进行桌面应用开发
  • 3d场景

• 发展历史

React的设计思路

UI 编程痛点

• 状态更新，UI不会自动更新
• 欠缺基本的代码层面的封装和隔离
• UI之间的数据依赖关系，需要手动维护，如果链路过长，会"Callback Hell"

响应式与转换式

• 转换式系统
  • 给定输入求解输出
• 响应式系统
  • 监听事件，消息驱动
• 前端UI
  • 事件
  • 执行既定的回调
  • 状态变更
  • UI更新
• 期望
  • 状态更新，UI自动更新
  • 代码组件化，可复用，可封装
  • 状态之间的依赖关系，只需声明即可

React 设计与实现

组件化

• 组件声明了状态和UI的映射
• “组件”可由其他组件拼装而成
  • 组件是组件的组合/原子组件
• 组件有Props/State两种状态
  • 组件内拥有状态，外部不可见
  • 父组件可将状态传入组件内部

状态归属问题

• 状态归属于最近公共祖先节点

生命周期

React（hooks）的写法（两种写法中主流写法）

代码介绍

• 声明状态

  • const [count, setCount] = useStatr(0);
  • 每次用setCount(count + 1)改变count状态

• 副作用

  • useEffect(() => {

    });

• 注意

  • 不要在循环，条件或嵌套函数使用

React 的实现

基本概要

Problem 1 & 2

• 转译（transport）
• 计算Diff，只更新Diff

How to Diff

• Virtual DOM

• 过程

• 算法

React状态管理库

核心思想

• 缺点
  • 将用组件复用性

推荐

状态机

应用级框架科普

• NEXT

• Modern.js