理解React的组件

Posted 2020-10-03 ZpandaZ

理解React组件

虽然一直用React写东西，但却不曾从原生去看待react组件的渲染方式，今天就打算深入探讨。有什么理解不对的欢迎指正

功能上看React组件

现在有一个web网站，这个网站可以实现很多功能，我们依据功能，把他们分成一个个小功能碎片，每个小功能碎片需要更多逻辑功能，还可以继续细分。这里React组件就是相当于这样一个个可组合的功能单元，可并列，可嵌套。

从结构上看React组件

创建

一个React组件被创建，包含React nodes和其他react组件。React nodes 用于表现Virtual DOM（虚拟DON）的类html元素节点，React中最基础的对象类型。所以Virtual DOM就是React节点和组件建构起来的JavaScript树形结构，用于高效的重构HTML中的真实DOM。

渲染

如果一个React组件被渲染，就是生成了这个React组件的class的实例，所以才会有this的指向性问题，与此同时，React节点就会渲染到真实的DOM中，组成新的DON树。

更新

根据diff算法，当把React nodes渲染进某一真实DOM节点中时，会清除该真实DOM节点的所有子元素。当子节点有改变时，React会重新渲染React nodes到相同的DOM中。

事件

1.React实际上并未直接为React nodes添加事件，它使用的是event delegation事件委托机制。

“简单地说，事件委托是利用事件流程的程序性行为和单个事件侦听器来处理多个事件目标。事件委托的副作用是事件目标不必在DOM中，因为创建事件以使目标响应事件”

2.React事件默认在事件冒泡阶段（bubbling）触发

3.想要阻止事件冒泡，需要手动调用e.stopPropagation() 或e.preventDefault()，不要直接使用return false