趣味前端

React原理

一、函数式编程

  1. 一种编程范式，概念比较多
  2. 纯函数
  3. 不可变值

二、vdom和diff

参考 vue vdom diff

三、JSX的本质

JSX 被 babel 编译成 React.createElment函数

React.createElement(
    tag<string> | component<function component | class component | string>, 
    data<object>, 
    ...child<function component | class component | string> | array<function component | class component | string>)
1
2
3
4

四、合成事件

  • 所有事件挂载到 document 上（React17挂载到 root 组件上）
  • event 不是原生的，是 SyntheticEvent 合成事件对象
  • 和 Vue 事件不同，和 DOM 事件也不同

1. 合成事件机制

9cdc24e17098036422dbe483ae1326ee.png

2. 合成事件机制的背景

  1. 更好的兼容性和跨平台
  2. 挂载到 document 上，减少内存消耗，避免事件频繁绑定和解绑
  3. 方便事件的统一管理（如事务机制）

五、setState 和 batchUpdate

1. setState

  1. 有时异步（普通使用），有时同步（setTimeout、DOM 事件）
  2. 有时合并（对象形式），有时不合并（函数形式）
  3. 后者比较好理解（像 Object.assign），主要讲解前者

2. setState主流程

e83260e57f2065d4325c67d1c25d665b.png

3. batchUpdate机制

4. transaction事务机制

六、组件渲染和更新过程

1. 组件渲染过程

  • props state
  • render() 生成 vnode（将 JSX 编译成 React.createElement，返回 vnode）
  • patch(elem, vnode)

2. 组件更新过程

  • setState(newState) --> dirtyComponents（可能有子组件）
  • render() 生成 newVnode
  • patch(vnode, newVnode)

3. 更新（patch）的两个阶段

  • reconciliation 阶段 - 执行 diff 算法，纯 JS 计算
  • commit 阶段 - 将 diff 结果渲染到 DOM

4. fiber