特别系统react与有何不同海量资源.pdfVIP

本文由简悦SimpRead转码，原文地址

开篇我们曾经，对于不同的知识，需要采取不同的学习策略。就React系统来说，它涉及的源

码量不算小，相关逻辑也不够内聚，整体的理解成本相对较高，可能不少人都被劝退过。

幸运的是，无论是在面试场景下，还是在实际的开发中，React相关的问题都更倾向于考验我们对

工作流、特征等逻辑层面问题的理解，而非对源码细节的把握。而工作流、特征等逻

辑层面的“主要”，正是我们本讲探讨的重点。

不管你曾经被React源码劝退过多少次，只要能好好把握住这一讲，拿下系统对你来说仍将是

小菜一碟。所以说大家不要怕，跟着我的思路走就完了。

作为团队前端框架方向的，我曾经在自研框架的初期，从React系统相关的设计思想中受益

良多。在这一讲，我将基于自己对源码的理解，为你介绍React系统的工作逻辑。

注：本文逻辑提取自React16.13.x。随着React版本的更迭，系统的实现细节难免有调整，

但其设计思想总是一脉相承的，你只要把握住逻辑即可。

回顾原生DOM下的流

这些年在候选人的过程中，我发现了一件非常有趣的事情：一些同学提起前端框架时能够滔滔不

绝，可说到DOM基础时却开始胡言语。这或许只有在当下这个前端发展阶段才会有的魔幻现实主义

现象，但要想理解好React机制，就必须对原生DOM流有扎实的掌握。因此在文章的开

篇，我们先来简单复下DOM流是如何工作的。

W3C标准约定了一个的过程要经过以下3个阶段：

1.捕获阶段

2.目标阶段

3.冒泡阶段

理解这个过程最好的方式就是读图了，下图是一棵DOM树的结构简图，图中的箭头就代表着的

“穿梭”路径。

当被触发时，首先经历的是一个捕获过程：会从最外层的元素开始“穿梭”，逐层“穿梭”到最内

层元素，这个过程会持续到抵达它目标的元素（也就是真正触发这个的元素）为止；此件

流就切换到了“目标阶段”——被目标元素所接收；然后会被“回弹”，进入到冒泡阶段——它会

沿着来时的路“逆流而上”，一层一层再走回去。

这个过程很像我们小时候玩的蹦床：从高处下落，触达蹦床后再弹起、回到高处，整个过程呈一个对称

的“V”字形。

DOM流下的性能优化思路：委托

在原生DOM中，委托（也叫）是一种重要的性能优化。这里我通过一道面试题，来

快速地帮你回忆相关的知识。

请看下面这段代码：

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

meta

metahttp-equiv=X-UA-Compatiblecontent=ie=edge

titleDocument/title

/head

body

ul

li床前/li

li疑是地上霜/li

li举头望明月/li

li低头思故乡/li

li锄禾日当午/li

li汗滴禾下土/li

li谁知盘中餐/li

li粒粒皆辛苦/li

li背不动了/li

li我背不动了/li

/ul

/body

/html

问：在这段HTML渲染出的界面里，我希望做到点击每一个li元素，都能输出它内在的文本内容。你

会怎么做？

一个比较直观的思路是让每一个li元素都去一个点击动作，按照这个思路写出来的代码是这样的：

script

varliList=d