还在为学习 React 或 JavaScript 框架而苦恼吗?以下 7 个阻碍你进步的错误(以及该如何改正)💪🎉
正在努力学习 React 或任何其他 JS 框架?
如果是这样,你并不孤单。
你可能用尽了所有在线资源,读了无数博客文章,还看了数百个 YouTube 教程。然而,什么也没得到🤷♂️。
此时,你可能会想: “为什么我不能理解这一点?其他人似乎都明白了。也许我应该放弃。”
但让我告诉你:感到不知所措是正常的。我经历过,很多人也经历过。
好消息是:它不必一直保持这种状态🌟。
只需避免 本文描述的7 个错误并应用共享的策略。
准备好了吗?我们开始吧!
错误#1:你不具备基本功。
也许你和我一样。
你完成了一些 JavaScript 项目,这些项目需要你具备 HTML、CSS 和 JavaScript 的基本知识。在这种虚假的自信驱使下,你决定学习 React、Vue 或 Angular……
但是,你很快就陷入困境,没有任何进展。
destructuring
我在学习 React 时就有这种感觉,因为我对诸如、async/await
或绑定之类的 JavaScript 概念一无所知"this"
😓。
因此,
- 由于我不理解其语法,所以我记不住它。
- 调试就像大海捞针。JavaScript 和 React 问题之间的界限很模糊,根本无法通过 Google 找到正确的术语。
如果这让你想起什么,这里有一些事情可以让你振作起来:我最终通过以下 3 个策略掌握了 React。
策略1:掌握JavaScript的基础知识
还记得我之前描述的困惑吗?
好吧,这一切都归结于没有牢固掌握 HTML、CSS 和 JavaScript。
因此,在继续您的 React 之旅之前,请确保您对这些内容感到满意。
以下是一些宝贵的资源:
我也强烈推荐 FrontendMasters!
策略2:了解库/框架的构建块

我们以 React 为例。
React 的核心是可复用 组件。然而,对于新手来说,这些组件可能显得非常棘手:语法可能看起来很奇怪,机制也不清楚等等。然而,理解它们至关重要。
方法如下:
- 理解函数式组件:尝试自己创建一些简单的函数式组件。点击 此处查看一些示例。
- 了解 props: props 允许数据在组件之间移动。您可以尝试创建一个将数据传递给子组件的父组件。点击此处查看一些示例 。
- 深入探究状态: 状态允许组件跟踪变化的数据。学习如何设置初始状态、如何更新状态,以及了解这些变化如何导致组件重新渲染。点击 此处了解更多关于状态的信息。
- 解析组件生命周期: 了解组件何时重新渲染、挂载、卸载等。理解每个阶段之间的区别。这将提升你的调试技能。
- 玩转效果和 Hook: Hook 是一些特殊的函数,可以让你使用React 的功能。点击此处
"hook into"
了解更多信息 。
一旦掌握了这些,您就可以考虑高级主题,例如上下文、参考等。
💡提示:我强烈推荐《高级 React》这本书。深入了解 React 可以帮助你更快地调试问题。
策略3:使用在线代码编辑器
不要使用本地代码编辑器!
尽管许多人建议在计算机上安装框架/库,但初学者应避免这样做。
为什么?因为本地开发可能是一个噩梦:
- 您需要处理捆绑器、终端等。
- 设置过程可能颇具挑战性。例如,对 Mac 用户来说轻而易举的教程可能对 Windows 用户来说并不适用。
- 在另一台电脑上复制你的项目可能会很困难。当帮助你的人无法复制项目时,这非常烦人。
替代方案?
使用在线代码编辑器,例如Codesandbox或Stackblitz。它们让你专注于编写代码,而不是处理本地环境的复杂性。
💡附注
如果您仍想在本地工作,请先了解一些概念:
- Npm 软件包:了解如何管理它们。 这里 有一份指南可以帮到你。
- 终端:学习如何使用终端以及一些最有用的命令。 这里 有一份全面的指南。
- 转译器 和打包器:了解为什么需要它们。点击此处了解转译器 ,点击此处了解打包 器。
最后,您可以利用 Vite等工具 轻松地设置您的项目。
返回目录⬆️
错误#2:你陷入了教程地狱
我们都经历过这样的情况。
您成功地完成了教程,但完成后却记不住任何内容。
你感到沮丧,于是告诉自己,重新看一遍教程可能会有帮助。于是你一遍又一遍地重温。最终,重温了好几次,却没有任何进步,你放弃了🤷♀️。
这时,你可能会换一个试试运气。但循环往复——最初的自信被令人心碎的现实所吞噬:你又一次什么都没记住。
或者,你可能从一个教程跳到另一个教程。你会这样想:“我的项目需要这个概念”,或者“之前那个教程不够清晰”。
这些场景描述了 “教程地狱”, 即自学者无休止地学习教程却不加以应用的状态。
那么,解决方案是什么?
简而言之,你必须逃离它,因为:
- 你没有取得任何有意义的进展。
- 随着每个新教程的学习,你的拖延症就会加重。
- 由于所有教程在某个特定时间点之后看起来都一样,因此您可能会感到无聊。
以下 3 个策略 将帮助你逃脱。
策略1:构建项目
这是必须的。
你可以在网上寻找项目创意,也可以自己构思。构建项目可以巩固你对概念的理解,帮助你发现知识缺口,最重要的是,增强你的自信心。
您可以在以下平台上找到一些:
入门提示
- 从简单开始: 从最简单的项目开始建立信心。
- 选择有意义的项目: 优先选择对你有意义的项目。事实上,你对一个项目的投入越多,就越容易保持动力。例如,当我从处理随机项目(并且无法完成)转向对我而言重要的项目(例如,开发个人应用程序或为工作做出贡献)时,我发现更容易坚持下去,更有效地学习,并看到进步。
策略二:教导

曾经向朋友解释过复杂的概念吗?
如果是这样,你就会知道它加深了你的理解并揭示了知识差距。
您可以将这种见解应用到您的前端开发人员之旅中,并通过教学来巩固您的学习。
因此,请在社交媒体(例如Twitter、Reddit)或开发者社区(例如本社区)上与朋友分享您的知识。
策略3:寻找责任伙伴
“辅导地狱”经常影响自学者,因为没有老师/学校来帮助他们保持学习进度。
为了解决这个问题,可以找一位问责伙伴。可以是朋友、家人或同事。定期与这个人沟通,可以营造一种课堂式的责任感。
如果有人监督你的进度,你就会更有动力去取得成果,从而帮助你逃脱。
返回目录⬆️
错误 #3. 你在不同的框架之间切换(React、Angular、Vue……)
当我努力学习 React 时,我会在它和 Angular 之间来回切换,这只会导致更多的挫败感。
你是不是也犯过这样的错误?不停地换着用不同的框架/库,结果却发现“山高水长流”。
如果是,请停止。
选择一个库或框架(React、Angular、Vue等)并使用以下5 种策略👇 来致力于它。
策略一:对社交媒体推荐持保留态度
像X/Twitter这样的平台非常适合社交、获取灵感和保持更新。然而,它们也会向你灌输大量关于新框架的信息,试图说服你放弃现有的框架。 作为初学者,请克制住切换框架的冲动。
策略2:选择一个完善的库/框架
并非所有框架都生而平等。它们在结构、用法以及至关重要的社区支持方面各不相同。作为新手,您肯定不想投资一个新框架,却发现网上找不到任何帮助。
选择成熟的库/框架,例如 React、Angular 或 Vue。它们拥有强大的社区,方便用户查找帮助和资源。
策略3:专注于你期望的结果
您的“期望结果”是您希望通过学习实现的主要目标,例如找到工作、完成项目等。
你选择的框架应该与这个目标保持一致。例如,如果你正在申请工作,请检查其先决条件,并选择最热门的库/框架。
策略#4:尝试不同的
如果你还不确定该选择哪个库/框架,可以先试用几个,然后再选择你最喜欢的。毕竟,喜欢的东西更容易坚持下去。
策略#5:加入库/框架社区
这能增强您与该工具的联系,帮助您随时掌握最新动态、寻求帮助并学习实用技巧。以下是一些社区链接:
- React: React 社区, r/reactjs
- Angular: Angular 社区, r/Angular2
- Vue: Vue 社区, r/vuejs
返回目录⬆️
错误 #4. 你一次学习了太多概念
您是否在学习 React 的同时尝试学习Redux、React-Router或Typescript?
如果是这样,那么你就犯了和我一样的错误。
学习一个复杂的概念已经很难了。同时学习多个概念? 那就更难了。你必须理解每一个概念,以及它们之间是如何相互作用的。
此外,即使你成功了,你也有可能认为某些工具是必需的。例如,你可能认为Redux是 React 的必备伴侣。
我们要为自己辩解,由于三个原因,我们很容易陷入这个陷阱。
我们陷入这个陷阱的三个原因
原因1:在线课程营销
许多在线课程会教授额外的 React 概念,以证明其价格合理。他们这样做,实际上是错误地暗示说,所有这些概念对于有效使用 React 都至关重要。
原因 2:不适合初学者的 React 安装建议
不幸的是,许多建议的安装 React 的方法都需要了解额外的概念。
甚至 React 团队也建议 使用Next.js 之类的框架来启动React 项目。
虽然这些都很棒,但由于涉及许多概念,故障排除可能会成为一场噩梦:服务器组件、捆绑器等。
原因3:害怕错过(FOMO)
害怕落后或想要最大限度地提高求职机会可能会促使你同时学习多个概念。
不幸的是,这往往会减慢而不是加速你的进步。
学习正确方法的三步计划
步骤1:利用“纯粹”的资源进行学习
我们再次以 React 为例。
正如我之前提到的,很多 React 课程内容臃肿。所以,选择一个只讲 React 的课程吧。
您可以使用以下任何资源:
步骤#2:选择最低成本的方式将 React 添加到你的项目中
选择最简单的方法来设置项目:使用在线编辑器,例如CodeSandbox或Stackblitz。它们提供现成的项目,让你可以专注于 React。
步骤3:逐一介绍概念

熟悉了所选的库/框架后,可以逐一介绍新技术(例如Typescript、Redux等)。这样更容易理解每种技术的独特优势。
如果您正在寻找一个平台来指导您完成此过程,我 再次推荐Frontend Masters 。
返回目录⬆️
错误 #5. 你不理解 JavaScript 库或框架解决的问题
想象一下,因为你的朋友不理解马拉松的目的,你也报名参加了马拉松比赛。
由于您与终点线缺乏个人联系,因此整个旅程(包括准备工作和实际比赛)可能会更具挑战性。
学习一个库/框架却不理解它所解决的问题,也是如此。如果你从未遇到过 Vanilla JS 的性能、可维护性、可扩展性或状态管理问题,你就很难保持动力。事实上,你付出的努力所带来的好处并不明显。
解决此问题的两步计划
步骤#1:使用 Vanilla JS 构建一个复杂的项目
选择一个复杂(但不要太复杂,以免阻碍你开始)的项目,并只使用 Vanilla JS 构建它。你可以 在这里找到一些示例。
步骤2:使用 React 或你选择的框架重新创建相同的项目
- 看看用这个工具构建会有多简单(希望如此)
- 比较Vanilla JS项目和库/框架项目的性能
返回目录⬆️
错误 #6. 你患有严重的冒名顶替综合症——内心深处,你认为这不适合你
您是否也听到了那唠叨的声音?
有没有哪个声音告诉你,React不适合你?或者你不适合做前端开发?
如果是这样,你并不孤单。
大多数开发人员,包括我自己,都经历过这种情况。
前端开发发展如此之快,很快就会让人应接不暇。然而,冒名顶替综合症是一回事,而令人 衰弱的 综合症又是另一回事。后者会让你麻木不仁,不敢尝试新事物。
如果你正在为此苦苦挣扎, 那就摆脱它吧。
你不需要完全消除你的冒名顶替综合症(如果你知道怎么做,请分享😉);相反,你必须让它易于控制。否则,“我没有这个能力”和“我学不会这个”之类的想法会扰乱你的思绪,让你更难理解和记住任何东西。
五种策略帮你远离冒名顶替综合症
克服冒名顶替综合症可能需要一些时间。但以下 5个 策略会有所帮助:
策略#1:衡量你的进步
定期跟踪和回顾你的进度——你学到的概念、你做过的项目、你解决的错误。这会增强你的自信心。
您可以利用以下任何Notion模板来跟踪您的进度👇:
策略2:构建真实世界的项目
构建项目并见证其上线可以极大地鼓舞士气。所以,构建任何项目,将其公开,并与家人、朋友和在线社区分享。
策略3:寻求帮助
冒名顶替综合症让人感到孤独。
然而,开发社区中的许多人都在努力解决这个问题。
所以,不要犹豫,加入像dev.to、 Hashnode或 Reddit这样的社区吧。你可以寻求帮助,并结识遇到同样问题的朋友。
策略#4:选择符合你技能水平的项目
刚开始时,不要尝试构建类似YouTube 克隆的东西。
相反,你应该评估一下你目前的水平,然后选择一个合适的项目。如果你渴望尝试更复杂的项目,可以考虑一些很棒的 YouTube 教程,比如 “Javascript Mastery”的教程。
策略五:指导他人
您可能会想,“我是一名新开发人员。我该如何指导任何人?”。
相信我,总会有人可以帮助你:朋友、家人或网上的随机人员(例如,像r/learnjavascript、r/learnreact这样的 Reddit 频道不断有新学习者寻求帮助)。
这是一次有益的经历,并为您的旅程增添意义。
返回目录⬆️
错误 #7:您采用了错误的学习格式。
尝试新的学习资源(例如Udemy、FreeCodeCamp、The Odin Project等)就像试衣服一样。有些资源很适合你,让你看起来更漂亮,而有些则不然。
没有放之四海而皆准的资源。对某个人有用的资源可能并不适合你。关键在于选择一种适合你的学习风格和你当时特定需求的资源。
这种认识深刻地影响了我的学习历程。事实上,最初我很难与FreeCodeCamp和Treehouse等学习平台建立联系。我以为问题出在我自己身上,因为大家都喜欢这些资源。
然而,当我偶然发现《你不懂 JS》系列丛书时,一切都改变了。它们让我彻底理解了 JavaScript。这一发现鼓励我探索其他资源,进一步推动了我的进步。
所以,如果你对某种格式感到困惑,就不要勉强自己。 尝试不同的格式 ,选择最舒服的。
返回目录⬆️
掌握 React 或任何 JS 框架可能看起来像一座难以逾越的高山。你可能会觉得其他人都在奋力向上冲刺,而你却被困在山脚下。
但问题是,你已经具备了成功的条件。你可能只是犯了本文提到的某个错误。
好消息?你现在有多种策略来应对这些问题,并掌握 React 的精髓。
如果你不确定从哪里开始,那就找出最阻碍你的错误,并使用分享的策略来克服它。
记住,我们追求的是进步,而不是完美。
所以,不要停下来。继续学习。继续成长。继续编码。不知不觉中,React 就不再只是一个工具,而是你最好的朋友。
返回目录⬆️
感谢您阅读这篇文章🙏。
留下评论📩让我知道您的想法。
并且别忘了留下“💖🦄🔥”。
如果您正在学习 React,请免费下载我的《101 React 技巧与窍门》一书。
如果您喜欢此类文章,请加入我的免费时事通讯FrontendJoy。
如果您需要每日提示,请在X/Twitter上找到我。
文章来源:https://dev.to/_ndeyefatoudiop/struggling-to-learn-react-or-any-javascript-framework-here-are-7-mistakes-holding-back-and-what-to-do-instead-31fn