对您的反应似乎不堪重负？

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

我一直都在听到类似的事情：

• 不要使用react;改用Vue。

  react是坚硬且无用的；代替使用HTMX或Vanilla JS。

• ETC。

，但是作为Palantir有5年经验的高级前端工程师，我可以自信地说：
• 在这篇文章中，我将解释为什么反应不像人们所做的那样复杂，如果您挣扎了，如何应对挑战。

  准备好？让我们潜水。 ？下载我的免费101个React技巧和技巧书，以获取抢手。

  [2
React感到艰难的7个原因（以及如何解决）

[2

原因1：您不太了解JavaScript

人们有99％的时间与React斗争，因为他们的JavaScript基金会不是稳固的。

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

在学习反应之前，您需要知道的最低限度：

原始和对象数据类型

[2

范围

[2 [2

ETC。

？查看肯特·C·多德斯（Kent C.

一旦您的JavaScript技能提高，React会感觉更容易。

？查看我的帖子如何提高前端技能以获取有用的资源来学习JavaScript。

[2

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

• 如果您是新手反应，请不要通过选择过时或过于复杂的工具来设置自己的失败：

• 不要使用

  不要使用
• 而是从vite开始。它快速，简单且对初学者友好。您稍后再感谢我。 [2

• 创建全堆栈应用程序的框架。

  您不需要知道Next.js或Remix即可学习React。
但是
• 因此，首先关注React。框架可以稍后出现，因为它们添加了一层复杂性。 [2

从头开始构建所有内容，尤其是考虑到可及性 - 可能会压倒性。 但是，您不必一个人面对它。

• 将它们视为

  快捷速度
。当别人已经建造了令人难以置信的牛时​​，为什么还要重新发明轮子呢？

以下是一些示例：

[2

shadcn/ui用于样式

ETC。

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

[2

如果您按时间或资源（例如一个人的团队），remix或next.js之类的框架可以是救生员。

何时使用它们：

你很开心

• 您正在构建一个全栈应用程序您想要内置的路由，服务器端渲染以及更多 如果您不需要全堆栈解决方案，请坚持与React路由器和一些必需库进行反应。 [2 原因6：您不了解React的渲染过程（最终出现性能问题）

理解React的渲染过程对于避免绩效问题至关重要：

• rendering： react call call call consoment functions（或类Component Render方法）生成虚拟DOM。 普通错误人物的造成：

太多的渲染器：

通过最小化状态，将状态保持在组件树中，然后在需要的地方使用回忆（不要 @ me？：memoization？ememoization可以改变生活）。 ？请查看有关React重新订阅者的指南。

useffect

可以避免许多效果。看，您可能不需要效果。

不遵循约定：例如，当渲染列表列表时，请始终使用唯一的键来防止错误。

[2

如果您的应用程序在开发中起作用，但在生产中破裂，则该添加测试和类型检查器了。 我知道，我知道 - 测试和打字稿听起来像过度杀伤。但是听我说。

是您的安全网，在触及您的用户之前捕获错误。

您的未来自我会感谢您！

这是我推荐的： type Checker：使用typescript。它对初学者友好，尤其是本指南。如果您使用的是VITE，则设置很简单。

[2

测试和类型可以节省您数小时的调试 - 并保持理智？。 [2 概括

的反应很难听起来吗？ 不。

React只是一个JavaScript库。大多数复杂性来自：

[2 [2

尝试自己做所有事情

[2

记住，每个专家曾经是初学者。 有了正确的心态和工具，React可以是您构建惊人应​​用程序的秘密武器。

奖励

：下载我的

免费电子书，
• 101 react提示&tricks&tricks

  ，并在构建更流畅，更快的react Apps时节省了小时的挫败感。 [2

  “思考食物”
//检测黑暗主题 var iframe = document.getElementById（'Tweet-1862406693444444444439-370'）; if（document.body.classname.includes（'dark-theme'））{ iframe.src =“ https://platform.twitter.com/embed/tweet.html？ }

• [2

  发现问题
//检测黑暗主题 var iframe = document.getElementById（'Tweet-1861017779249320435-683'）; if（document.body.classname.includes（'dark-theme'））{ iframe.src =“ https://platform.twitter.com/embed/tweet.html?id=18610177779249320435&theme=dark” }

[2

发表评论？要与React分享您最大的挑战，或者是什么使您点击您。

，不要忘记丢弃“ ???”。

If you're learning React, download my 101 React Tips & Tricks book for FREE.

如果您喜欢这样的文章，请加入我的

新闻通讯，

frontendjoy

如果您想要每日提示，请在X/Twitter或Bluesky上找到我。