我在学习基于 Vue 的 React 时遇到的 5 个困难

初始状态

在过去三年的大部分时间里，我一直在使用 Vue，我已经非常熟悉 Vue 的语法和库，并且对这个框架非常熟悉。Vue 很容易上手，主要有两个原因：

1. 清晰分段的组件结构 - HTML 模板、JS 和 CSS。
2. JS 段内直观命名的选项 - 组件、道具、数据、计算、方法、监视和生命周期挂钩。

可以说，任何具备 HTML/CSS 背景的人，只要研究过一个编写良好的 Vue 组件，就能在无需参考文档的情况下，大致猜出它的功能和工作原理。即使是编程新手，那些直观的选项名称也会非常有帮助。

突变

时间快进到一年前，我对 React 的了解仅限于几篇比较 Vue 和 React 以及该使用哪一种的文章（这类文章有很多，如果你从未使用过它们，大部分内容可能不太容易理解），以及一些按照入门指南在 React 中创建简单组件的尝试。这一切看起来都相当简单。我的意思是，这两个框架能有多大区别呢？

后来，我换工作了，终于有机会真正学习 React 了。当时我惊呆了。

本文旨在帮助其他人（无论是否具备 Vue 背景）理解 React函数式组件，并更快地掌握 React 的概念。本文并非试图将 Vue 和 React 作为竞争框架进行比较，也无意对两者进行排名。

我遇到的 5 件事

1.代码结构

在 Vue 中，每个组件都有三个部分：

• <template>（HTML/JSX），
• <script>（JS 在直观命名的选项内构建），
• <style>（CSS）。

它与典型的 HTML 页面布局非常相似，尽管样式在“页脚”而不是“页眉”。

在 React 函数式组件中，主要的底层关键在于组件代码像典型的 JS 脚本一样从上到下按顺序运行，并返回一个值，通常是 HTML/JSX。从 Vue 来看，其结构如下：

• 一团糟（JS - 钩子和方法的非结构化散布），
• 返回（HTML/JSX）

乍一看，由于 JS 代码段没有固定的结构，理解别人写的代码并不容易，尤其是在没有注释的情况下。内置钩子的命名过于专业（useEffect、useMemo、 ），如果不查阅文档，根本无法理解上述钩子中第二个参数的用途。因此，虽然这些钩子比 Vue 中的钩子（ - 、-和, - 钩子，第二个参数为空）useCallback更灵活，可复用性也更强，但它们的可解释性也更差。watchuseEffectcomputeduseMemouseCallbackmounted

话虽如此，当我开始编写自己的组件时，我开始意识到虽然没有固定的结构，但有一些规则（例如 Hooks 规则）使我的代码遵循非显式定义的结构。在我的所有组件中，我倾向于定义组件内使用的所有状态，并将所有设置代码放在下方。之后，我发现自己以逻辑关注点为单元来构建代码，这与我methods在 Vue 中构建选项的方式非常相似。

然后我意识到，在我这个外行看来一团糟的东西，其实在各个项目中都有着一个通用的结构——我只需要更深入地理解 hooks 的功能和用例，就能理解 React 组件的结构。如果你已经理解了基本的计算概念（副作用、记忆化、回调），那么学习起来难度并不大。

对于来自 Vue 的用户，这里有一个简短的词汇表，可帮助您理解某些钩子如何转化为 Vue 概念。

对于那些没有 Vue 背景的人来说，这里是我所学到的关于 React 函数组件代码结构的总结。

• 某些方法、常量和样式可以在组件范围之外定义（通常在文件顶部）。这些是经过优化的，这样可以避免在每次渲染时重新创建上述对象。
• 组件通常从获取 props、定义状态以及导入可复用的方法/辅助函数开始。这与 JS 文件的结构非常相似。
• 接下来通常是设置方法：设置安装状态、计算派生值、获取数据。
• 组件内使用的所有其他逻辑 - 希望按逻辑关注点来组织。
• 如果你好奇 CSS 是如何运作的，React 并没有规定 CSS 的使用方式。你可以自由地导入 CSS 文件、定义内联样式或使用 CSS-in-JS 库。

2. 生命周期方法

我非常欣赏 Vue 的一个关键概念是对组件生命周期的清晰定义和文档。React 也尝试对此进行文档化，但不如 Vue 那样详尽，而且 API 仅适用于类组件。随着 React 转向函数式组件，生命周期方法不再那么容易访问。

刚开始学习 React 时，我最先想了解的概念之一就是 React 组件的生命周期。我已经习惯了 Vue 的生命周期钩子，所以一直在寻找 React 函数式组件中类似的功能，但 React 官方指南的“状态和生命周期”部分并没有这方面的文档。而且，即使是类组件，React 也无法像 Vue 那样提供完整的生命周期访问。

然而，在 Vue 中，我最常用的生命周期方法是 mounted 和 unmounted。所以，我其实一直在 React 函数式组件中寻找类似的方法。经过进一步的 Google 搜索，我发现 useEffect hook 的功能和 Vue 中 mounted/unmounted hook 的功能一样。虽然不太直观，但只需适配 React API 即可。至少我的 setup 和 teardown 方法找到了解决方案。

简而言之，我在这里学到的是，在 React 函数式组件中，setup 阶段（通常在 Vue 中创建/挂载）可以用 useEffect(, []) 编写，而 teardown 阶段（在 Vue 中卸载）可以用 useEffect(... return function(), []) 编写。虽然其他生命周期方法在 React 中无法访问，但它们的使用频率可能并不高，不会造成太大的麻烦。

3. 双向绑定 vs 单向绑定

在 Vue 中，v-model 指令允许对输入元素进行双向绑定。从纯粹的懒惰（或许也是为了可维护性）角度来看，这可以节省大量样板代码。虽然我不想争论双向绑定和单向绑定哪个更好，但切换到 React 后，不得不编写看似样板的方法来更新状态，这对我来说确实很烦人。更糟糕的是，正确使用 React 意味着不是修改状态，而是创建副本并重置状态。这意味着 React 中的表单代码比 Vue 中的代码长得多。

对于不了解 React 背景的人来说，React 的核心功能之一是单向数据绑定，简而言之，数据只能单向流动。这使得 React 能够更有效地判断状态是否发生变化以及导致变化的原因。

在复杂的 Vue 组件中，你偶尔会遇到即使可观察对象已更新，DOM 却没有更新的情况。这种情况很少见，但确实会发生，而且调试起来很麻烦。不过，React 中的单向数据绑定可以消除此类问题，因为每次调用 setState 时都会手动触发 DOM 更新。这样做的缺点是你必须编写代码来触发重新渲染（setState），而使用 Vue 则无需这样做。

事实上，在我刚开始使用 React 的时候，这很大程度上只是个小麻烦。后来，我构建了可复用的组件，不再需要为表单编写样板代码了。事实上，有了FormBlob，我可以在 2 分钟内创建任何我需要的表单。

4. 范围样式（CSS）

Vue 中的作用域样式非常简单。如果你熟悉 HTML/CSS，一切都会变得非常自然——在 HTML 元素上定义一个类，然后在<style scoped>片段中为该类设置 CSS 样式。

作用域样式有助于确保样式仅在其定义的组件内应用。这使我们能够在多个组件中重复使用类名，而不必担心在其他地方定义的样式会干扰。这对于构建跨多个项目使用的组件库尤其有用。

React 没有关于 CSS 应用方式的预定义建议。您可以自由地导入 CSS 文件、使用内联样式或使用 CSS-in-JS 库。一些 CSS-in-JS 库（例如 jss 或 emotion）已经非常流行，并已在许多 React 项目中使用。然而，与任何第三方库一样，学习曲线总是存在，尤其是在定义可复用样式时。

在我被指责太宠之前，请记住，这是我从 Vue 迁移到 React 的经历。在 Vue 中，我不需要重新学习任何 Vue 特定的样式库，而且我可以使用原生 CSS 实现开箱即用的可复用类名的作用域样式。而在 React 中，实现类似效果的过程可以说更加繁琐，无论是编写自己的 CSS 文件还是使用第三方库。

5. 参考资源和图书馆

选择 React 的理由之一始终是，React 作为更受欢迎的框架，拥有更丰富的在线资源和支持。但以我的经验来看，我是在函数式组件发布后才开始使用 React 的，所以事实并非如此。

React 已经存在很久了，版本也很多（现在是 v17），有大量过时的解决方案和过时的库。我发现，找到 Vue（现在只有 v3）的解决方案和相关库比找到 React 的要容易得多。自从使用 React 以来，我发现自己花在谷歌上寻找能够满足我需求的解决方案的时间比使用 Vue 时要多得多。从我个人的角度来看，这是我刚开始使用 React 时遇到的一个难题。我偶然发现的很多解决方案根本行不通，而且要花更多时间才能找到一个可行的方案。但这可能是因为我的谷歌搜索能力不够强！

结论

我曾使用 Vue 和 React 构建过复杂的应用。说实话，过去一年来我每天都在使用 React，现在对它更加熟悉了。如果现在要开始一个新项目，我会选择 React，因为用 React 比用 Vue 能更快地交付完整的应用。现在我已经对 React 及其特性更加得心应手了，对 Vue 或 React 这两个框架并没有强烈的偏好。

本文纯属个人轶事，并非旨在客观比较 Vue 和 React。我的目的是分享我从 Vue 过渡到 React 的经验，希望能帮助到正在学习 React 或正在学习 React 的其他人。我欢迎任何与我的经历相反的观点和经验，我无意发表任何笼统的言论或主张（即使在文章中这么说）。我是一名编程学生，并且永远都是，并且乐于向任何人学习。

干杯!