作为过来人分享一点当年痛苦的学 React 经验。学 React 之前，我有很多Web开发经验，Asp、 iOS 开发经验，那时候流行的是 MVC，Model+View+Control，主要思路是数据绑定，也就是View相当于模板，各种占位符，数据自动填充进去。 React 的 JSX/TSX

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

学 React 之前，我有很多Web开发经验，Asp、https://t.co/AkUfsxf4aW、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 https://t.co/uxIFD2md2U 是个宝库，各种类型的开源项目都有，绝大部分质量很不错，毕竟 Vercel 已经官方帮你筛选过一遍了，要进去还是需要有一定的质量要求的。当然缺点是和 Nextjs 绑定的比较深。

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

同步发布于博客：https://t.co/HJr4msxTxk