专栏名称: 宝玉xp
前微软Asp.Net最有价值专家 互联网科技博主 我是宝玉。
目录
相关文章推荐
爱可可-爱生活  ·  今日推介(第1563期):通过将模型合并为语 ... ·  2 天前  
爱可可-爱生活  ·  //@爱可可-爱生活:欢迎参与~-20241 ... ·  2 天前  
奇舞精选  ·  程序员必备!面向Prompt编程全攻略 ·  3 天前  
爱可可-爱生活  ·  【Tabled:一款能从PDF和图片中智能识 ... ·  3 天前  
爱可可-爱生活  ·  【AsrTools:智能语音转文字工具,集成 ... ·  6 天前  
51好读  ›  专栏  ›  宝玉xp

回复@小王子_Mason:看文档写一个Hello World不算-20241019112835

宝玉xp  · 微博  · AI  · 2024-10-19 11:28

正文

2024-10-19 11:28

回复@小王子_Mason:看文档写一个Hello World不算学会,学会要能独立开发一个复杂的应用程序,比如像 ChatGPT 这样的 Web App//@小王子_Mason:react都学不会?文档看看就可以写了
《为什么越是老程序员学 React 越是难学》

> 初学者:第二次尝试学习 React 了,还是学不会,感觉上一次的学习经历没留下任何记忆。
> 大师:React 是这样的。React 是这样的。
> — 象牙山刘能

作为过来人分享一点当年痛苦的学 React 经验。

学 React 之前,我有很多Web开发经验,Asp、Asp.Net、JavaScript,还有 iOS 开发经验,那时候流行的是 MVC,Model+View+Control,主要思路是数据绑定,也就是View相当于模板,各种占位符,数据自动填充进去。

React 的 JSX/TSX 看起来有点像一个模板,但实际上远远超越了模板的范畴,包含了数据状态、事件和生命周期。

如果一个没有编程经验的人学 React 没那么难,因为它们一开始就习惯了 React 这种模式,但是对于习惯了传统 MVC 模式的程序员来说,会忍不住用以往的经验去套,结果又很多似是而非,除了HTML/CSS和JS语法,几乎什么经验都用不上,就会异常痛苦。

比如习惯了 jQuery 的程序员,实现一个动态交互,首先想到的是去找到 Dom 元素,然后去响应时间去操作。但是 React 完全不一样,你都不知道怎么去找一个 Dom 元素,你需要定义状态(state、props),需要去控制状态的变化,根据状态的变化去生成不同的 JSX/HTML。

这时候就会想,这么点功能,要是 jQuery 我早就做出来了,干嘛还要学 React,挫折感很强,很想退回舒适区。

等你好不容易习惯了 React 这种状态和界面分离,通过状态变化来触发界面变化,结果又发现还要单个组件还好,组件一多,这状态的管理就复杂了,再加上和服务端的 API 交互,完全没有什么以前的经验可以借鉴。

等到搞定了 React 的全局状态管理,才能真正算是可以掌控复杂的 React 程序了。

当然接下来的问题是,你以为写的 React,但最终很多工作其实是在 CSS 上,要做出好看的界面,还要掌握好 CSS,你说这知识不算是 React,但你没有又写不好 React。

类似的还有脚手架问题,React 不像 jQuery,直接浏览器可以运行,它要事先编译打包的,打包你得用 WebPack 吧,等你一用 WebPack,才发现等于又学了一门语言。

当然省事一点就是用 Nextjs 这样的,节约好多时间。我现在基本上固定下来的前端搭配就是 NextJS + TailwindCSS + Shadcn ui + Jotai,高效多了。

所以学 React,新手反而比老手好一点,有其他领域编程经验的,学 React 可能更痛苦,以前丰富的编程经验竟然几乎都用不上,还是退回舒适区好😎

如果真想掌握好,最好是忘记自己是个程序老手,忘记以前的经验,当成一门全新的语言来学,找几个好的 React 程序学习研究一下,看看最佳实践都有哪些。

哪里去找最佳实践呢?Vercel 的 Templates 网页链接 是个宝库,各种类型的开源项目都有,绝大部分质量很不错,毕竟 Vercel 已经官方帮你筛选过一遍了,要进去还是需要有一定的质量要求的。当然缺点是和 Nextjs 绑定的比较深。

学 React 这个过程肯定是痛苦的,少则几个月,多则几年,熬过去的话,开发 Web 程序还是相当高效的。

同步发布于博客:网页链接