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

尝试了一下 react,直呼最强-react 小书读后感

  •  2
     
  •   miv · 269 天前 via iPhone · 4489 次点击
    这是一个创建于 269 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最近看一 react 开源项目,看得头大。
    里面各种 hooks 满天飞,不过代码倒是整洁。
    对于小白看这种项目感觉就是无限套娃,无限封装。
    所以没办法,用了几天的时间看了一下 react (之前有接触过,没入门,有 vue 小基础),有几点感受:
    0 、react 的 jsx 其实也还好,没有那么难受(对比之前 vue 的那种 teamplate )
    1 、hooks 真的轻量,用它好自由,放飞自我
    2 、区分聪明组件傻瓜组件代码更舒服,容易复用(还了解到状态提升这种玩意)
    3 、高阶组件就是个封装逻辑的,离不开他,其实有必要了解
    4 、了解了一下 redux 原理原来是如此好玩,和 vuex 有共通之处
    5 、之前 vue 上面那些 mapstate (记不太清名了)原来是这样来的,有一种茅塞顿开的感觉(之前是在 vue 上接触的,直接上手没想太多,时隔多月,没想到在 react 上对他的了解深入了一下)
    6 、redux 了解以后,发现 useselect,usedispach 就感觉这些 hooks 香香

    最后,感觉很多技术都是共通的,要取长补短,相互借鉴,融会贯通。
    42 条回复    2021-03-20 19:19:49 +08:00
    miv
        1
    miv  
    OP
       269 天前 via iPhone
    小白给 react 发帖打 call
    learningman
        2
    learningman  
       269 天前 via Android
    这几天在看 react,感觉个人小项目还是 vue 舒服的多
    neoblackcap
        3
    neoblackcap  
       269 天前
    没记错的话,hook 就是为了要干掉高阶组件
    FEDT
        4
    FEDT  
       269 天前 via iPhone
    245 可以深入讲讲吗,写个文章什么的
    miv
        5
    miv  
    OP
       269 天前 via iPhone   ❤️ 1
    @FEDT 哈哈,老哥直接去撸一下 react 小书就好了,那个书强推
    ericgui
        6
    ericgui  
       269 天前
    @learningman 哪个舒服用哪个

    虽然我不用 vue,但我觉得还是看个人对框架的熟悉程度吧
    murmur
        7
    murmur  
       269 天前
    高阶组件是个反前端的设计思路
    java 喜欢搞什么连续继承
    前端是我要的组件就是最强,如果你不行,我直接换一个行的,谁有闲心接着你的组件写高阶组件啊
    zqx
        8
    zqx  
       269 天前 via Android
    高阶组件就是高阶函数+组件,很符合函数式的风格,比如 array.filter.map.reduce 这一套操作下来就得到了你想要的结果,组件也如此
    zhuangzhuang1988
        9
    zhuangzhuang1988  
       269 天前 via Android
    @murmur ✓,维护时 剧痛哭
    meteor957
        10
    meteor957  
       269 天前
    @murmur 组合 vs 继承
    murmur
        11
    murmur  
       269 天前   ❤️ 1
    @meteor957 前端的组合不是代码的组合,是组件的组合,组件组合出页面,选项控制组件的特性

    很大一部分是因为 css 控制了前端最基本的样子,这一部分是和 js 无关的

    我希望是 dialog 可以自由显示标题,可以定制按钮,可以控制是不是 modal,可以控制尺寸、边距、初始位置

    而不是要 dialog 继承 window 继承 pannel
    love2020
        12
    love2020  
       269 天前
    @miv 什么小书
    nannanziyu
        13
    nannanziyu  
       269 天前
    @murmur
    感觉你没有做过复杂项目
    你所说的,对于做个 demo 来说没错
    但是对应到具体的项目,每个项目之前各个组件风格都是统一的
    比如项目所有的 dialog 风格都是统一的,都是细节部分的区别,所以就有了写一个 common 组件,然后其他派生的需求
    murmur
        15
    murmur  
       269 天前
    @nannanziyu

    比如项目所有的 dialog 风格都是统一的,都是细节部分的区别

    说的没错,这些是 CSS 要解决的问题啊,如果 css 都解决不要,可以说出来讨一下,哪个细节不能用 css 调整,不能用选项控制(这个选项是大众需求,不是为杠而生,比如标题、按钮、关闭的 XX 、最大化最小化这些属于合理需求)
    justin2018
        16
    justin2018  
       269 天前
    React.js 小书
    https://hyf.js.org/react-naive-book/
    楼主说的是这本书吗?
    miv
        17
    miv  
    OP
       269 天前
    @justin2018 对的
    nannanziyu
        18
    nannanziyu  
       269 天前
    @murmur
    相似组件并不只有样式的区别
    比如同样的列表,A 列表和 B 列表样式完全一样,但是一个是 QQ 新闻,一个是网易新闻
    那么做一个同样的 common 组件,然后分别继承,override getFeeds 方法就可以了,之后再添加别的平台,也是非常方便
    具体项目具体情形具体分析,但是复杂项目中通用组件派生的情况非常普遍而且是最佳实践
    zxCoder
        19
    zxCoder  
       269 天前
    试试 angular
    csdoker
        20
    csdoker  
       269 天前
    楼主看的啥开源项目呀 我也一直想找个适合小白看的项目 想学习下别人 hooks 的用法
    impl
        21
    impl  
       269 天前
    书的内容不错,要是能继续更新就更好了
    stockmaster
        22
    stockmaster  
       269 天前
    Vue 本来就是基于 Angular 和 React 设计出来的,当然共通。
    KuroNekoFan
        23
    KuroNekoFan  
       269 天前 via iPhone
    @nannanziyu 你说的这个难道不是应该把查询数据的逻辑作为依赖传递一个函数就好了吗?
    huoxingren
        24
    huoxingren  
       269 天前   ❤️ 1
    墙裂推荐看这个 react hooks 讲解:
    https://www.bilibili.com/video/BV1Ge411W7Ra
    yamedie
        25
    yamedie  
       269 天前
    @nannanziyu QQ 新闻+网易新闻 这种场景是我理解的今日热榜爬虫站吗? 两个列表里的属性名命名方式各有不同? 为什么不在数据源头统一成同一种命名方式, 而是放在前端用高阶组件来处理呢?
    nannanziyu
        26
    nannanziyu  
       269 天前   ❤️ 1
    @KuroNekoFan
    只是简化的场景举例,具体项目具体情形具体分析
    比如这三个播放界面(normal, mini, fullPlayer),80%的逻辑是一样的,但是 UI 和具体行为逻辑分别有差别,就是很合适的继承适用场景


    nannanziyu
        27
    nannanziyu  
       269 天前
    @yamedie
    同上,大家要明白举例只是简化的场景,为了表达意思
    nannanziyu
        28
    nannanziyu  
       269 天前
    yamedie
        29
    yamedie  
       269 天前
    @nannanziyu 很强, 这是用 electron 开发的? 我用 vue2.x 开发这类"多种形态"组件时, 确实比较难搞, 只能硬着头皮写 3 套样式在一个 SFC 里(比如 simple, thumbnail, detail), 用于切换不同的外观样式. 如果拆成 3 个单独的组件维护起来又会成为噩梦
    nannanziyu
        30
    nannanziyu  
       269 天前   ❤️ 1
    @yamedie
    是的,electron 的,不过也可以跑在网页里,只不过跑在网页里用的是 html5 的播放组件,跑在 electron 里是 vlc
    我是三个都擅长,但是对于复杂逻辑界面,推荐你用 angular,虽然上手难,但是复杂度上来用 angular 控制难度小太多太多
    nannanziyu
        31
    nannanziyu  
       268 天前
    @murmur
    楼上的例子讨论一下呢
    magichacker
        32
    magichacker  
       268 天前
    react-router 的文档写的挺拉胯的
    OHyn
        33
    OHyn  
       268 天前 via Android   ❤️ 1
    react 官方不提供类似 vue 中 keep-alive 的功能,倒腾起来比较麻烦。
    nannanziyu
        34
    nannanziyu  
       268 天前
    @murmur
    你自己 #15 说要讨论,然后就一击脱离……
    murmur
        35
    murmur  
       268 天前
    @nannanziyu 不好意思,我还在想,昨天回去之后家里没科学,图全是 x
    murmur
        36
    murmur  
       268 天前
    @nannanziyu 我看了你的例子,首先这是一个播放器,播放器的纯核心都是 pure js,不涉及任何框架

    其次,这是一个组合布局的例子啊,音乐列表、播放器按钮、封面专辑图都是一模一样的

    就是尺寸有点区别

    这就是先组件化然后做了一个布局而已,何谈继承
    nannanziyu
        37
    nannanziyu  
       268 天前
    @murmur
    1, 播放器的纯核心不是 pure js,是 c++
    2,所以这三个不同的播放界面,你是按照三个界面来组合吗?
    murmur
        38
    murmur  
       268 天前
    @nannanziyu 因为核心组件封装的太完整了,只需要把播放列表,按钮、封面、歌词重新组合一下,然后调整下 css 就可以做出来了

    这个实在没看出继承的优点,调库属于继承么,调组件属于继承么,应该不算严格的继承吧
    nannanziyu
        39
    nannanziyu  
       268 天前
    @murmur
    算了不跟你说了,讨论不到点上,你没做过复杂的 APP
    vertigo
        40
    vertigo  
       268 天前
    笑死,react 能跟 vue 比
    daokedao
        41
    daokedao  
       267 天前
    redux 现在还是必须吗?
    huijiewei
        42
    huijiewei  
       263 天前
    有了 hook 了。要 redux 干嘛。。。

    react hook 真的香
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3799 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 06:59 · PVG 14:59 · LAX 22:59 · JFK 01:59
    ♥ Do have faith in what you're doing.