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

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

  •  
  •   yazoox · 2020-10-13 09:35:36 +08:00 · 6581 次点击
    这是一个创建于 1487 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

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

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

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

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

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