V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
djoiwhud
V2EX  ›  React

web 前端学习路径

  •  
  •   djoiwhud · 2020-04-24 11:45:48 +08:00 · 3957 次点击
    这是一个创建于 1675 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    16 条回复    2020-04-24 16:55:39 +08:00
    zhw2590582
        1
    zhw2590582  
       2020-04-24 11:49:49 +08:00
    红宝书虽然经典,但太过时了,还不如看 w3cschool 入门,再去 developer.mozilla.org 进阶
    djoiwhud
        2
    djoiwhud  
    OP
       2020-04-24 12:01:29 +08:00
    @zhw2590582 w3school 里面的内容太烂了。developer.mozilla.org 并没有介绍 react 这类前端框架。
    skypyb
        3
    skypyb  
       2020-04-24 12:03:22 +08:00 via Android
    培训班视频请
    maichael
        4
    maichael  
       2020-04-24 12:08:44 +08:00
    hooks 你完全可以先不用,你可以当它是个语法糖(虽然心智模型会带来额外的压力),但是不用它完全不影响你写代码。

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

    router 本身没什么复杂的,特别是 4 之后,把它理解成组件就行了,redux 本身不复杂,就是个有限状态机。saga 稍微复杂点,但是如果只是用的话就还好。
    abcbuzhiming
        5
    abcbuzhiming  
       2020-04-24 12:19:25 +08:00
    @jackrelative 请先搞清楚,你所谓的深入前端到底是要做什么?人家让你去 developer.mozilla.org ,因为那里是 Web 技术的基石,底层的原理,如果深入,这才是正道。结果你说“没有介绍 react 这类框架”?这算什么深入 Web 前端,你是想深入框架吧,深入框架很简单,官网文档,请,英文不熟额外加 google 翻译,请。但是这不是深入 web 前端。请先搞清楚自己要的是啥。
    hyyou2010
        6
    hyyou2010  
       2020-04-24 12:24:28 +08:00
    个人肤浅理解:成体系的话,就是只看 react+redux+router,其他尽量都抛开。所有的都只看基础部分,然后串接成一个整体即可。

    antd pro 做了大量封装,包含上述三者,知道数据流程,会增删模块即可
    hyyou2010
        7
    hyyou2010  
       2020-04-24 12:27:25 +08:00
    我猜楼主是希望先总体把握 react 这一套体系,以后再到局部和细节
    zhw2590582
        8
    zhw2590582  
       2020-04-24 12:51:08 +08:00
    你是想绕过 js 基础去深入 react 体系?那不就是不管原理去背 react api 而已吗,那有什么难的。
    djoiwhud
        9
    djoiwhud  
    OP
       2020-04-24 12:53:01 +08:00
    @hyyou2010 是的。我是想先整体的弄清楚全貌大概什么样的。但是,各种莫名其妙的概念一个接一个。还没有成体系的书介绍,一块一块割裂开的。
    djoiwhud
        10
    djoiwhud  
    OP
       2020-04-24 13:00:29 +08:00
    @maichael umi 、dva 这两呢。我感觉可能我不应该试图用 antd pro,这玩意的使用曲线真陡峭。看了一天 antd pro 官方的文档,也就是比没有略好一点。antdpro 里面冒出 umi 、dva 、webpack 、redux 、router 、saga 一连串的概念。
    djoiwhud
        11
    djoiwhud  
    OP
       2020-04-24 13:07:20 +08:00
    @zhw2590582 我本人有 8 年多后端开发经验,对 js 语言的理解应该是充分的。前两年还设计过基于 go+cgo+v7+js 的方案的项目。
    azcvcza
        12
    azcvcza  
       2020-04-24 14:05:00 +08:00   ❤️ 1
    react mvvm 视图框架,核心思想 f(state) -> view
    react-router 路由,控制组件跳转
    redux,非常基础,简单的状态管理仓库
    至于你说的 antdPro,umi,dva 是阿里基于 react 封装起来的框架
    webpack,类似于 java 和 maven 一样的存在,管理众多工具,前端工具链目前最大头的一个
    saga,因为 redux 太过于简单,且不满足异步的事件订阅,发布,更新状态,有人就写了一个支持异步的状态库
    hooks 的话,是 react 提出的新特性,满足‘逻辑上’ 而非组件的复用,以往逻辑复用大家要么用 hoc,要么用 renderProps,或者其他。你不想用的话,react 又不是把生命周期编程范式干掉了,照着生命周期编程范式来写最多就是啰嗦,又不会写不出
    jrtzxh020
        13
    jrtzxh020  
       2020-04-24 15:22:50 +08:00 via iPhone
    别用 umi 搞一堆乱七八糟的概念,绕来绕去,真的服了。怎么简单怎么来,别用那些高度抽象和封装的东西。
    raistlin916
        14
    raistlin916  
       2020-04-24 15:28:28 +08:00
    react 只看 hooks 相关,把 hooks 吃透就行了,原来的 component class 只是 react 推广时期的权宜之计,后面都不会用到。这方面推进 antd 已经很慢了,Material-UI 老早就把所有例子全部替换成 hooks 了。
    hooks 主要是心智模型更靠近函数式编程,不是一般而言调用 api 那么简单。
    再学个 rxjs 你就是资深前端开发。
    redux 知道怎么回事就行。
    BasIrs
        15
    BasIrs  
       2020-04-24 16:16:52 +08:00
    @zhw2590582 如果 8 年后端经验连 js 基础都不会的话那也太....
    hyyou2010
        16
    hyyou2010  
       2020-04-24 16:55:39 +08:00   ❤️ 1
    @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 红宝书更适合,阮一峰那本就很好。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1394 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:09 · PVG 01:09 · LAX 09:09 · JFK 12:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.