web 前端学习路径

[djoiwhud]

我想深入看看 web 前端，最好技术方案能够适配管理后台、前台产品、electron 和 phone 端使用。

基础储备：js 红宝书几年前看过两遍，es6 两年前粗略看过一次。react 最近看了一点点。感觉 react 自由度过大，我并不知道 webpack，redux，router，saga 这些，作为新手，停下功夫来看这些干扰了我的节奏，也不知道为什么要看这些，有些困惑。有啥靠谱一点的文档或者书，能够成体系的介绍的么 ？

我自己写过一些小的 react 功能，但是用 antd pro 做开发的时候，里面的各种概念好像我从来没看过 react 一样。又冒出一大坨的什么 react hooks 之类概念。体验真的差。

8 年经验的专职后端开发经验。

[zhw2590582]

红宝书虽然经典，但太过时了，还不如看 w3cschool 入门，再去 developer.mozilla.org 进阶

[djoiwhud]

@zhw2590582 w3school 里面的内容太烂了。developer.mozilla.org 并没有介绍 react 这类前端框架。

[skypyb]

培训班视频请

[maichael]

hooks 你完全可以先不用，你可以当它是个语法糖（虽然心智模型会带来额外的压力），但是不用它完全不影响你写代码。

webpack 可以不用太深入去看，会配置知道个大概就行了，而且现在各种脚手架的完善程度，大多数情况下你都不需要去碰它。

router 本身没什么复杂的，特别是 4 之后，把它理解成组件就行了，redux 本身不复杂，就是个有限状态机。saga 稍微复杂点，但是如果只是用的话就还好。

[abcbuzhiming]

@jackrelative 请先搞清楚，你所谓的深入前端到底是要做什么？人家让你去 developer.mozilla.org ，因为那里是 Web 技术的基石，底层的原理，如果深入，这才是正道。结果你说“没有介绍 react 这类框架”？这算什么深入 Web 前端，你是想深入框架吧，深入框架很简单，官网文档，请，英文不熟额外加 google 翻译，请。但是这不是深入 web 前端。请先搞清楚自己要的是啥。

[hyyou2010]

个人肤浅理解：成体系的话，就是只看 react+redux+router，其他尽量都抛开。所有的都只看基础部分，然后串接成一个整体即可。

antd pro 做了大量封装，包含上述三者，知道数据流程，会增删模块即可

[hyyou2010]

我猜楼主是希望先总体把握 react 这一套体系，以后再到局部和细节

[zhw2590582]

你是想绕过 js 基础去深入 react 体系？那不就是不管原理去背 react api 而已吗，那有什么难的。

[djoiwhud]

@hyyou2010 是的。我是想先整体的弄清楚全貌大概什么样的。但是，各种莫名其妙的概念一个接一个。还没有成体系的书介绍，一块一块割裂开的。

[djoiwhud]

@maichael umi 、dva 这两呢。我感觉可能我不应该试图用 antd pro，这玩意的使用曲线真陡峭。看了一天 antd pro 官方的文档，也就是比没有略好一点。antdpro 里面冒出 umi 、dva 、webpack 、redux 、router 、saga 一连串的概念。

[djoiwhud]

@zhw2590582 我本人有 8 年多后端开发经验，对 js 语言的理解应该是充分的。前两年还设计过基于 go+cgo+v7+js 的方案的项目。

[azcvcza]

react mvvm 视图框架，核心思想 f(state) -> view
react-router 路由，控制组件跳转
redux，非常基础，简单的状态管理仓库
至于你说的 antdPro，umi，dva 是阿里基于 react 封装起来的框架
webpack，类似于 java 和 maven 一样的存在，管理众多工具，前端工具链目前最大头的一个
saga，因为 redux 太过于简单，且不满足异步的事件订阅，发布，更新状态，有人就写了一个支持异步的状态库
hooks 的话，是 react 提出的新特性，满足‘逻辑上’ 而非组件的复用，以往逻辑复用大家要么用 hoc，要么用 renderProps，或者其他。你不想用的话，react 又不是把生命周期编程范式干掉了，照着生命周期编程范式来写最多就是啰嗦，又不会写不出

[jrtzxh020]

别用 umi 搞一堆乱七八糟的概念，绕来绕去，真的服了。怎么简单怎么来，别用那些高度抽象和封装的东西。

[raistlin916]

react 只看 hooks 相关，把 hooks 吃透就行了，原来的 component class 只是 react 推广时期的权宜之计，后面都不会用到。这方面推进 antd 已经很慢了，Material-UI 老早就把所有例子全部替换成 hooks 了。
hooks 主要是心智模型更靠近函数式编程，不是一般而言调用 api 那么简单。
再学个 rxjs 你就是资深前端开发。
redux 知道怎么回事就行。

[BasIrs]

@zhw2590582 如果 8 年后端经验连 js 基础都不会的话那也太....

[hyyou2010]

@jackrelative

我曾经跟你同样困惑，我的教训就是如前所述，先抛开并不影响大局的东西，防止太多概念术语，先用基本部分串接出整体。

我再大言不惭继续推荐下：
1，看 react 基础部分，抛开高级部分和 hooks
2，看 react-router 基础部分，知道其本质是 if/switch 语句即可
3，看 redux，连异步都不用看，什么 saga 之类。
4，react+router+redux 串出一个小 demo，比如 todolist
5，这个时候你就可以总体把握了，再根据需要扩展细节

我不赞同首先去钻研诸如 js 细节，或者 hooks，或者 antd pro 。这些无助形成整体。

另外我多次推荐这篇文章，有助于理清发展历程，使你有信心先抛开 webpack： https://zhuanlan.zhihu.com/p/38209210

再另外，es6 远比比 js 红宝书更适合，阮一峰那本就很好。