跳到主要内容

React-概述

本文主要针对 react 源码进行解析，深入理解 React 底层原理。

源码概述​

React​

react 中包含所有的全局 React AP1。

React-DOM​

react-dom 渲染器用于管理一颗 fiber 树。将 React 组件渲染成 DOM。

Reconcilers​

协调算法，Reconciler 会调用树中组件上的 render()，然后决定是否进行挂载，更新或是卸载操作。

Fiber Reconciler​

Fiber 从 React16 成为了默认 reconciler

主要作用

  • 能够把可中断的任务切片处理。
  • 能够调整优先级，重置并复用任务。
  • 能够在父元素与子元素之间交错处理，以支持 React 中的布局。
  • 能够在 render() 中返回多个元素。
  • 更好地支持错误边界。

源代码在 packages/react-reconciler 目录下

事件系统​

React 在原生事件基础上进行了封装，以抹平浏览器间差异。源代码在 packages/react-dom/src/events目录下。

React 知识点​

JSX​

  • JSX 是 JavaScript 的语法扩展，可以很好的描述 UI 应该呈现出应用的交互本质
  • JSX 是 React.createElement(component, props, ...children) 语法糖

虚拟 DOM​

  • React.createElement 返回的结果就是虚拟 DOM
  • 描述真是 DOM 的 js 对象

fiber​

fiber 是执行单元，数据结构。节点对应一个 fiber。根据虚拟 DOM 生成 Fiber 链表结构。

fiber 可以对任务分解，形成工作单元，可中断 reconcile 阶段。保存状态和更新队列

dom-diff​

dom-diff 是当前 fiber 树和新的虚拟 DOM 对比生成新的 Fiber 树的过程。 其中有几个优化原则：

  • 同层比较
  • key 不同直接删除，创建新的

合成事件​

请说一下你对 React 合成事件的理解？

  • 实现原理

    • React 把事件委托到 container 节点上 （v17 之前 是 document 节点上）
    • 先处理原生事件 冒泡到 document 上在处理 react 事件
    • React 事件绑定的时刻是在 reconciliation 阶段,会在原生事件的绑定前执行

  • 目的和优势

    • 进行浏览器兼容,React 采用的是顶层事件代理机制，能够保证冒泡一致性
    • 默认批量更新

  • 事件系统的变更

    • 更改事件委托
      • 首先第一个修改点就是更改了事件委托绑定节点，在 16 版本中，React 都会把事件绑定到页面的 document 元素上，这在多个 React 版本共存的情况下就会虽然某个节点上的函数调用了 event.stopPropagation(),但还是会导致另外一个 React 版本上绑定的事件没有被阻止触发，所以在 17 版本中会把事件绑定到 render 函数的节点上

参考资料​

源码概述