我对 React 的理解

虚拟DOM

组成部分

组件生命周期

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

每次学习新的语言、库或框架时，我都喜欢在脑海中构建一个图像，理解它的工作原理以及背后的原因。如果能够轻松辨别它们的优缺点，对于为业务问题提供切实可行的解决方案将大有裨益。

我不会死记硬背技术细节。通过定期使用工具，你会逐渐记住它们。相反，我更专注于架构层面，并努力理解所有部分是如何协同工作的。

至于 React，我认为要精通它，需要深入理解三个主要方面：虚拟 DOM、组件和组件的生命周期。

虚拟DOM

DOM 以逻辑树状结构表示文档。几乎所有 UI 库都使用树状结构来表示，因为它有助于几何变换和属性继承。React 的虚拟 DOM 是该结构的副本。由于修改真实 DOM 的开销很大（计算新的 UI 表示需要时间），React 会先在其副本上执行操作，然后比较新旧版本，以确定更新真实 DOM 的最佳性能方式。

这意味着你正在编写和更新的内容并非真正的 DOM。它不具备相同的属性，因此你不应该以相同的方式对待它。这也意味着 React 的设计理念具有普适性，因为浏览器中的 DOM 与其他平台（例如 React Native）的 UI 库在表示方式上非常相似。它仍然是树状结构，但节点类型有所不同。这里有一篇文章更详细地解释了虚拟 DOM。

组成部分

每个组件负责虚拟 DOM 的一部分，这部分内容可能包含其他组件。组件有两种类型：类和函数。我更喜欢函数，因为它通常更容易操作。有了 Hooks，你就可以像我现在这样使用函数而不是类了。

作为开发者，你需要创建一个组件树，其中包含你自己的组件以及库提供的组件。这些组件会接收 props 作为输入，并返回它们负责的组件树部分。还有一些特殊的组件称为 HOC（高阶组件），它们是一些函数，可以返回带有新 props 的现有组件，或者返回一个包含现有组件作为子组件的全新组件。

组件生命周期

那么业务逻辑应该放在哪里呢？对于类组件来说，它包含多个阶段，而 React.Component 类提供了在每个阶段都会被调用的方法。你需要根据想要实现的功能选择合适的阶段。有些方法只在组件创建（挂载）和销毁（卸载）时调用一次，而另一些方法则会在组件更新时（由多种因素触发）被多次调用。这里有更详细的解释。

使用函数可以让代码更简洁。无需再担心生命周期问题。你只需接收 props 作为参数，然后返回树的 section 即可。就这么简单。现在有了 hooks，你可以实现之前类组件的功能。hooks 是函数，它会根据当前 props 接收参数，并可选择性地返回可在函数内部使用的对象。这些对象并非在函数作用域内创建，因此不会在函数返回时被销毁。我认为它们会在组件负责的虚拟 DOM 的 section 被销毁时被销毁。

以上就是我对 React 的理解。当然还有很多其他方面，比如 refs 和真实 DOM 之间的关系、Babel 以及 JSX。但我认为这三个概念最为重要，你需要先理解透彻。