React 真的像听起来那么难/复杂吗？

React 是否让你觉得不知所措？

如果是这样，你并不孤单。

我经常听到这样的事情：

• 不要使用 React；请改用 Vue。

• React 很难而且没用；请改用 HTMX 或 Vanilla JS。

• 等等

但是作为一名在 Palantir 拥有 5 年经验的高级前端工程师，我可以自信地说：“React 是我必须学习的最简单的东西。”

在这篇文章中，我将解释为什么 React 并不像人们想象的那么复杂，以及如果您遇到困难如何应对挑战。

准备好了吗？让我们深入了解一下。

？下载我的免费 101 React Tips And Tricks Book，抢占先机。

React 感觉困难的 7 个原因（以及如何解决它）

原因 1：你对 JavaScript 不够了解

人们 99% 的时间都在与 React 作斗争，因为他们的 JavaScript 基础并不扎实。

这对我来说也是如此——一开始我无法理解 React 代码。我花了几个月的时间努力写出任何像样的东西。当我学习 JavaScript 后，这一切都改变了。

这是学习 React 之前您需要了解的最少知识：

• 原始数据类型和对象数据类型的区别

• 对象解构

• 范围

• 关闭

• 异步

• 等等

？查看 Kent C. Dodds 撰写的这篇精彩指南，了解 React 所需了解的 JavaScript 概念。

一旦你的 JavaScript 技能得到提高，React 就会变得更容易。

？查看我的文章《如何提升前端技能》，获取学习 JavaScript 的有用资源。

原因 2：您使用了错误的工具

如果您是 React 新手，不要因为选择过时或过于复杂的工具而让自己陷入失败：

• 不要使用 创建 React App:它已经过时、缓慢且缺乏可扩展性。

• 不要使用 Next.js （暂时）：虽然令人惊奇，但它增加了你不需要的学习曲线初学者。

相反，从 Vite 开始。它快速、简单且适合初学者。以后你会感谢我的吗？.

原因 3：你混淆了 React 和框架

React ≠ Next.js ≠ Remix。

Next.js 和 Remix 是构建在 React 之上的框架，用于创建全栈应用程序。

你不需要了解 Next.js 或 Remix 来学习 React。

但是你需要了解React 才能使用其中任何一个。

所以，首先关注 React。框架可以稍后出现，因为它们增加了一层复杂性。

原因 4：您试图从头开始构建一切

从头开始构建一切——尤其是考虑到可访问性——可能会让人不知所措。

但是，你不必独自面对。

React 的美妙之处在于它的库生态系统，可以让你的生活更轻松？.

将它们视为快捷方式。当别人已经造出了一个令人难以置信的轮子时，为什么还要重新发明轮子呢？

以下是一些示例：

• 用于拖放功能的 dnd-kit

• shadcn/ui 用于样式

• 用于轻量级数据获取的 SWR

• 等等

利用这些工具节省时间和精力。

原因 5：你人手不足但不使用框架

如果您缺乏时间或资源（例如单人团队），Remix 或 Next.js 等框架可以成为救星。

何时使用它们：

• 你人手不足

• 您正在构建一个全栈应用程序

• 您想要内置路由、服务器端渲染等等

如果您不需要全栈解决方案，请坚持使用 React 和 React Router 以及一些必要的库。

原因 6：你不了解 React 的渲染过程（最终会出现性能问题）

了解 React 的渲染过程对于避免性能问题至关重要：

1. 渲染： React 调用组件函数（或类组件渲染方法）来生成虚拟 DOM。

2. 协调： React 将虚拟 DOM 与真实 DOM 进行比较，以找出发生了什么变化。

3. 提交阶段： React 仅更新必要的 DOM 元素。

4. 绘画：浏览器重新绘制屏幕。

反应渲染过程。学分：https://x.com/_georgemoller

人们常犯的错误：

• 渲染过多：通过最小化状态、在组件树中保持较低的状态以及在需要时使用记忆来解决此问题（不要@我？：记忆可以改变生活） .
  
  ？查看有关 React 重新渲染的指南。

• 过度使用 useEffect: 许多效果是可以避免的。看，您可能不需要效果。

• 不遵循约定：例如，在渲染列表时，始终使用唯一键以防止错误。

原因 7：您的应用程序在生产中出现故障

如果您的应用程序在开发中正常运行，但在生产中出现故障，那么是时候添加测试和类型检查器了。

我知道，我知道——测试和 TypeScript 听起来可能有点矫枉过正。但请听我说完。

它们是您的安全网，在错误到达您的用户之前捕获它们。

未来的你会感谢你的！

这是我的推荐：

• 类型检查器： 使用 TypeScript。它对初学者很友好，尤其是有了本指南。如果您使用 Vite，设置很简单。

• 测试：将 Vitest 与 Vite 或 React 测试库一起使用进行其他设置。

测试和类型将节省您数小时的调试时间，并让您保持理智？.

概括

React 真的像听起来那么难吗？ 没有。

React 只是一个 JavaScript 库。大部分复杂性来自：

• 对 JavaScript 不够了解

• 混淆 React 与框架

• 尝试自己做所有事情

• 概览 React 基础知识

记住，每个专家都曾经是初学者。

凭借正确的心态和工具，React 可以成为您构建出色应用程序的秘密武器。

你有这个吗？.

奖励：下载我的免费电子书， 101 React 提示和技巧，并在构建更流畅、更快的 React 应用程序时节省数小时的挫败感。

？引人深思

<script> // Detect dark theme var iframe = document.getElementById('tweet-1862406693444874439-370'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1862406693444874439&theme=dark" } </script>

?发现问题

这是一个包装？.

发表评论？分享您在 React 方面面临的最大挑战或是什么让您感到满意。

别忘了加上“???”。

如果您正在学习 React，请免费

下载我的 101 React Tips & Tricks 书。

如果您喜欢这样的文章，请加入我的免费时事通讯，FrontendJoy

。

如果您想要每日提示，请在 X/Twitter 或 Bluesky 上找到我。 <script> // Detect dark theme var iframe = document.getElementById('tweet-1862406693444874439-370'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1862406693444874439&theme=dark" } </script>

以上是React 真的像听起来那么难/复杂吗？的详细内容。更多信息请关注PHP中文网其他相关文章！