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

搞不明白 React Hooks,有没有兄弟分享一下经验?

  •  
  •   yazoox · 13 天前 · 3290 次点击

    公司产品一直用的是 react-redux 做状态管理,用 saga 处理异步。

    升级到了 16.8,听说有个 hooks,很方便。

    看了官方文档,也搜索了一下,还是搞得不是很明白。

    大家有没有看到比较好的文档 /文章,详细介绍分享这个 react hooks 的?求分享指点。谢谢。

    另,这个 hooks 比 redux 好用么?能够取代 redux & saga 么?

    31 条回复    2020-10-14 10:17:00 +08:00
    jianzhang810
        1
    jianzhang810   13 天前
    VDimos
        2
    VDimos   13 天前 via Android
    推荐个 lib,react-uses,看下会对 hooks 有更深的理解
    easonHHH
        3
    easonHHH   13 天前
    hook 是取代 class 的吧,两者应该会长期共存一段时间,不过有 useReducer
    倒是官方出了一个对标 redux 的 recoil
    azcvcza
        4
    azcvcza   13 天前
    murmur
        5
    murmur   13 天前
    hook 和 class 是两种写法,思路是有变化的,我认为 hook 本质上解决的是 react api 又长又臭的问题,不是说 hook 就比 class 优越,该设计一样得设计,以前考虑生命周期,现在直接考虑变量,该优化还是得优化,该不管还是可以不管
    gouflv
        6
    gouflv   13 天前 via iPhone
    redux 解决的是状态管理和共享,而 hooks 只是状态管理,不涉及如何共享数据,所以你说怎么取代?
    看文章自己要动脑,一知半解的时候不要瞎幻想
    wee911
        7
    wee911   13 天前
    @gouflv hooks 组合能解决共享问题, 多数场景没有用 redux 必要,hooks 一套带走
    Wolther47
        8
    Wolther47   13 天前 via iPhone
    这是两个东西,屑屑。

    Hooks 介绍文档里面就有当时 Conf 的视频,建议看一遍,两段都是关于 migrating from class components to hooks 的,看完就知道 useState 、useEffect 和 useContext 了,基本可以搬砖了
    KuroNekoFan
        9
    KuroNekoFan   13 天前
    其实 hooks 有点像 vue 的 mixin,当然,好很多
    KuroNekoFan
        10
    KuroNekoFan   13 天前
    自定义 hook 和 react 原本提供的 hooks 应该区分来看待,自定义 hook 可以看作一段逻辑,而 react 本身提供的 hooks 是为了解决副作用的
    yaphets666
        11
    yaphets666   13 天前
    @KuroNekoFan 这俩东西没什么相似之处吧...
    Wolther47
        12
    Wolther47   13 天前 via iPhone   ❤️ 1
    @gouflv #5 Hooks 不是为了解决状态管理的。这东西纯粹就是当时往 Class Component 走的方向错了,再引入的改进办法。Hooks 主要目的是解决逻辑复用和业务逻辑分裂的,Vue 那难产了几年的 3 也在想办法解决这个问题。
    nanyang24
        13
    nanyang24   13 天前
    探索有关 Algebraic Effects 的概念,应该会有启发
    codelegant
        14
    codelegant   13 天前
    Hanggi
        15
    Hanggi   13 天前
    hooks 核心思想就是去掉 class 所有东西都用 function 替代.
    codelegant
        16
    codelegant   13 天前
    附上作者的 Github 主页 https://github.com/gaearon
    gouflv
        17
    gouflv   13 天前 via iPhone
    redux 就算对标,也是应该和 unstated 和 constate 这些去对
    KuroNekoFan
        18
    KuroNekoFan   13 天前
    @yaphets666 自定义 hooks 是为了逻辑复用,mixin 也是为了逻辑复用
    cityboy
        19
    cityboy   13 天前
    以前用 react-redux 共享全局变量。hooks 里面建议用 useContext 这种,但是我一直不会用这种方式,而且用着感觉很麻烦。各位大佬有最佳实践,可以让小弟观摩观摩
    KuroNekoFan
        20
    KuroNekoFan   13 天前
    @cityboy 接着用 react-redux 没毛病,可以看看 react-redux 新提供的 api:useDispatch 和 useSelector
    Torpedo
        21
    Torpedo   13 天前
    hook 先学习基本的 hook 概念。
    然后就是封装 hook 复用。
    之前函数推荐纯组件,你可以这么写:一种函数组件有 hook,负责逻辑什么的;一种函数还是纯组件,没有 hook 和状态。

    在 hook 之前,复用都是用高阶组件。但是高阶组件不能很好的控制顺序,互相之间组合挺麻烦的。但是 hook 之间组合很方便,也容易复用。
    Torpedo
        22
    Torpedo   13 天前
    @cityboy useContext 这种主要用来共享一些变量吧。react-redux 也是用的这个。只不过一般使用的时候,context 里变量都是用来存状态的,这样状态变量,useContext 都会变。
    但是 react-redux 用的是一个状态引用,发布订阅模式,保证只更新 selector 选中的状态部分
    ghosthcp516
        23
    ghosthcp516   13 天前
    你可以理解成函数内的 import / export
    stabc
        24
    stabc   13 天前   ❤️ 1
    @gouflv LZ 不就是在求教吗。这种虚心的态度你也能喷?而且你自己的理解也不咋地啊
    dartabe
        25
    dartabe   13 天前
    我自己在写完 Redux 之后 又用 Hook 包了一层 这样在其他模块里面要用的话 就更方便了

    也是网上看来的 不知道算不算最佳实践

    https://github.com/zjusticy/flashCards/blob/master/src/hooks/useAuth.ts
    agdhole
        26
    agdhole   13 天前
    所以又要状态管理又要数据共享,应该用什么?
    cityboy
        27
    cityboy   13 天前
    @KuroNekoFan redux 那一套东西写起来太冗余了,我看 antd pro v5 的共享变量方式不错,但是不知道自己怎么实现
    lemon6
        28
    lemon6   13 天前 via Android
    hooks 代码量少,class 代码结构清晰。仅此而已
    imjamespond
        29
    imjamespond   13 天前 via Android
    hooks 没法实现 componentshouldupdate,的 prevouspros 和 state,只是简单对比,而且 useeffect 箭头 func 中包括的 props 要写到第二变量数组监视
    namelosw
        30
    namelosw   13 天前
    继续 Redux 把,只不过可以 useReducer + useContext,而不再用 ReactRedux 了

    纯 hooks 用 useState 替代 useReducer 很难。简单的情况用 useState 的 setter 就够了还行,如果还要有逻辑抽方法啥的调 setter 的话,要加的 useMemo 和 useCallback 太多了,最后一直在写没用的 useMemo 和 useCallback,还记不住要写哪些,而 useReducer 的 dispatch 不会导致重绘。
    KuroNekoFan
        31
    KuroNekoFan   12 天前
    @cityboy 一堆 reducer,action 定义文件什么的是挺冗余的,但是我觉得没必要那样,我一般一个 store 就完事了,当然,状态提升要谨慎
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1040 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 21:34 · PVG 05:34 · LAX 14:34 · JFK 17:34
    ♥ Do have faith in what you're doing.