经常会看到有人对前端技术劝退，有的说前端不如后端，说前端变化太快新技术层出不穷，不值得投入。别听他们的！
我们小时候流传着： “我是中国人，何必学外文，不会ABC，也当接班人”、“学好数理化，不如有个好爸爸”这样的话，让你本来就觉得学习苦闷，一下子找到个理由不用好好学习了，长大了才追悔莫及。
Web程序是庞杂，框架是换的勤，但这不能成为不需要深入学习的理由，恰恰是要深入了才能真正掌握好，不再变成各种框架或者工具的奴隶。
学Web，先要关注那些最基本的东西，HTML+CSS+JS（JavaScript）+DOM (Document Object Model)是最最基础的，所有的框架都是围绕这这些来的，因为最终浏览器能渲染的是HTML+CSS，能执行的是JavaScript，能交互主要依赖CSS或者JS操作DOM。
如果你掌握好了HTML/CSS/JS/DOM，很多问题你就可以找到本源。
比如说你只是需要一个点击控制显示隐藏，你不需要一个框架，几行JS控制元素的样式就能轻松搞定。用框架可能更容易，你只要想清楚你最终要输出的HTML和CSS是什么，就可以帮助你用好框架，出问题了基于Dev Tool也可以轻松排查原因是什么。
比如新出的CSS-IN-JS，如果你CSS和JS已经很熟了，用起来几乎没什么成本，无非就是CSS换一种写法，最多就是不同类库之间有一些配置上的差异，用的时候查文档就好了。
掌握好基础后，就要学习主流框架。
现在前端框架还在继续推陈出新，但主流的依然是React和Vue两大阵营，就这两大主流框架来说，它们最核心的是什么呢？状态管理+模板（例如JSX）是核心。
在当今的主流前端框架之前，Dom操作和模板是分开的，Dom操作被jQuery一统天下了，模板引擎有很多，比如mustache、handlebars、ejs、razor等等，应用一复杂会相当痛苦，数据一致性很难保证，性能低下。
直到Angular这样的框架推出，让数据和模板可以双向绑定，用JS操作数据，UI就可以跟着数据改变，UI上操作会反向修改数据。这种数据绑定的改变是革命性的，因为极大的简化了DOM操作，只要设计好web应用的数据结构，将数据和模板绑定好，后面就可以聚焦在数据的更新上，轻松完成复杂的交互。
但数据双向绑定带来的问题就是调试非常痛苦，有时候你都不知道是哪部分操作修改了数据，导致一些奇怪的问题，同时应用性能的控制也很复杂，频繁的数据操作带来频繁的DOM操作，极其影响应用性能。
后来当React设计的时候，就很好的解决了这些问题：虚拟DOM、单向数据流、JSX。
- 虚拟DOM可以减少对DOM的操作，有效提升性能，并且可以更好的抽象，甚至于应用到移动和桌面应用端，比如React Native。
- 单向数据流让数据流向更清晰，易于跟踪管理。
- JSX像是一种高级的模板语言，可以方便的将数据和界面绑定，配合React的事件和生命周期，可以组合出复杂的交互效果
后面无论React怎么升级，以及各种模仿React的框架，这些核心部分都没怎么变，尤其是数据管理和模板部分。
React本身是聚焦于View这一层，状态管理是很弱的，当应用复杂时就力不从心，所以通常就需要配合第三方的状态管理库一起。状态管理库最有名应该属于Redux，如果你搞明白了Redux，其他状态管理库都不会复杂。
很多人觉得Redux复杂，一有人说这些web技术不需要学精更不想学了，但它是绕不过去的，而且它没有你想的那么复杂。Redux的核心就是几个概念：state、action、reducer、store。
Redux的state（状态）是类似于树形的数据结构，每个reducer都对应它的一个子节点。它的数据是不可变的，也就是说每次修改某个节点的任何数据，需要创建一个新的数据节点并克隆旧的数据，确保能触发相应UI的更新。
Redux的action是发出一次修改state操作的信号，但不会直接修改state。
Redux的reducer是用来处理action的。reducer有两部分，一部分是这个reducer对应的节点数据，一部分是对某些特定action的处理，根据action的类型和传过来的数据修改节点的数据。
Redux的store是一个连接器，通过它可以和React进行绑定，让Redux的state改变可以触发React的UI更新，让React中的事件可以发送Action到Redux。
Web程序除了框架还有工具，尤其是打包工具像WebPack和Vite，这些工具都是为了方便将你的代码打包成浏览器可以运行的js文件，根据开发环境和生产环境生成不同的结果。这些工具你可以只需要会使用它，这并没有多难，而且你搞明白webpack，再去用vite就会很亲切，并不会增加太多学习上的成本。
学东西，最忌讳其实是浅尝则止、杂而不精，最简单有效的反而是基于你所要学习的领域，抓住其最本质的知识，深入的学习和掌握，再扩展到其他就很容易，因为很多知识你都可以重用的！
无论前端领域怎么快速的在更新迭代，但万变不离其宗，抓住本质就可以不变应万变；另外适应变化本身就是一项重要的能力！
via 宝玉
文章评论