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

我发现我不喜欢用 react-hooks

  •  
  •   cl903254852 · 2020-09-12 15:38:05 +08:00 · 3714 次点击
    这是一个创建于 441 天前的主题,其中的信息可能已经有所发展或是发生改变。

    react-hooks 更适合写逻辑简单的小组件,遇到逻辑复杂的组件相较 class component 更难维护(不要跟我说逻辑拆分什么的)。

    举个例子,我维护同事写的页面,如果是 class component 我一眼就能看明白整个组件结构,一下就能瞄到 componentDidMount

    这是我个人的感想

    第 1 条附言  ·  2020-09-14 15:49:12 +08:00

    我知道hooks和class component是完全两个不同的思想,但我说真的,react本身是适合写中大型项目的框架,这非常容易造成一个问题,团队技术不齐,加上hooks没有鲜明的声明周期函数(你必须自己封装useMount或使用第三方库比如react-use),这非常容易导致每个人都是张三丰,打出来的太极拳难以维护。对我来说 可维护性大于性能。 这里我不得不夸赞一下vue3,大家都是函数式,但vue3一眼看下去就非常有层次,至少我看起来不会脑壳疼,不像我看同事写的代码滚动条上下滑动却不知道从哪里入手。

    举个例子: vue3的写法:

    Vue3这种写法非常优雅,简直爱了,而要达到这种写法 react 要借助 mobx+react-use 外部库才能实现:

    第 2 条附言  ·  2020-09-14 15:50:11 +08:00
    ### 但是,谁让我爱 React 呢
    33 条回复    2020-09-16 15:28:54 +08:00
    whincwu142
        1
    whincwu142   2020-09-12 15:52:00 +08:00 via Android
    可以用类似 react-use 这样的库,加上自定义 hooks 封装逻辑,也是可以很清晰的,甚至更简单,当然对开发人员的要求也更高了
    KuroNekoFan
        2
    KuroNekoFan   2020-09-12 16:27:33 +08:00
    什么叫关注点分离啊(战术后仰
    dartabe
        3
    dartabe   2020-09-12 16:42:25 +08:00
    主要是自定义 hooks 很强大 最近的感觉
    zhuangzhuang1988
        4
    zhuangzhuang1988   2020-09-12 17:11:53 +08:00
    正常, react-hook 心智负担 也很大, 很容易出错, 而且难调试
    hoyixi
        5
    hoyixi   2020-09-12 17:22:34 +08:00
    是有道理的,class 组件比较清晰,可以写的又臭又长。

    如果你的 functional 组件写的大,useEffect 里长长一坨,那你该考虑提取功能了。例如上面朋友提到的,一些小功能封装成可重用的自定义 hooks
    liberty1900
        6
    liberty1900   2020-09-12 17:46:35 +08:00 via Android   ❤️ 5
    不谈逻辑拆封还写什么代码
    相关的状态应该封装成对象
    想要明确的生命周期自己封装 useMount 或者使用 react-use 之类的库
    用 hook 整个思维方式都要改变,不要老想着生命周期,要想着 synchronization.
    举了一个例子就出来怼了,你说没有明确的 API, 我还说这精简了一个 API 呢
    murmur
        7
    murmur   2020-09-12 17:48:54 +08:00
    类组件和胡克斯本身是两种思维方式,

    但是 react 有个特殊之处,就是生命周期命名太尼玛长了,学 ios 那一套命名,前端又没有 idea 这么牛逼的 ide 帮你自动补全,相比之下 vue 就没那么多事,别人就是按类组件封装也打不了几个字。
    murmur
        8
    murmur   2020-09-12 17:49:17 +08:00
    所以说又回到老生常谈的问题了,代码长短和质量、运行效率有关么?
    love
        9
    love   2020-09-12 18:44:55 +08:00 via Android
    没觉得代码更混乱,反而能更好的抽出公共部分,不过 react hooks 有硬伤倒是真的,有些地方比较费脑子
    nidaye999
        10
    nidaye999   2020-09-12 19:20:50 +08:00
    我发现我喜欢用 react-hooks, 代码逻辑非常清晰。我再也不用 class 。
    Jirajine
        11
    Jirajine   2020-09-12 19:34:47 +08:00 via Android   ❤️ 3
    hooks 才是 react 函数式的精髓,class 组件还不如用 vue 。
    impl
        12
    impl   2020-09-12 21:05:26 +08:00 via Android
    记得 svelte 作者也说他不喜欢 hook
    duan602728596
        13
    duan602728596   2020-09-12 21:59:04 +08:00
    最近的项目完全使用 react-hook 开发,是真的舒服。
    在 react-hook 里就不要想着声明周期那一套,原来生命周期那一堆反而写起来很乱。
    拿 useEffect 和生命周期函数做对比,是为了让开发者能了解 useEffect,在 class 组件和 function 组件内如何实现相同的功能。

    ```javascript

    // class
    class ClassComponent extends React.Component {
    constructor() {
    super();

    this.state = {
    data: this.props.data,
    list: []
    };
    }

    componentDidUpdate(prevProps, prevState) {
    if (this.props.data !== prevProps.data) {
    // do something
    }

    if (this.state.list !== prevState.list) {
    // do something
    }

    if (this.props.data !== this.state.data) {
    // do something
    }
    }

    componentWillUnmount() {
    // do something 1
    // do something 2
    }
    }


    // function hook
    function FunctionComponent(props) {
    const [list, setList] = React.useState([]);

    React.useEffect(function() {
    // do something

    return function() {};
    }, [props.data]);

    React.useEffect(function() {
    // do something
    }, [list]);
    }

    ```

    class 组件的声明周期是渲染 /重新渲染 /组件卸载时,你需要自己来判断是哪些值变了,哪些值没变,所以在 class 组件的生命周期内可能会充斥着一堆的 if else 的判断。
    function 组件的渲染 /重新渲染 /组件卸载,是由哪个值的变化引起的,然后执行这个值被依赖的 hook,即当这个值变化时,执行什么操作,反而更一目了然。
    lemon6
        14
    lemon6   2020-09-13 00:54:10 +08:00
    hooks 的优点就是代码量少,我个人还是喜欢用 class 因为组件结构可以看的很清晰 也容易维护
    hgjian
        15
    hgjian   2020-09-13 00:59:40 +08:00 via Android
    @lemon6 凌晨一点了
    lihongming
        16
    lihongming   2020-09-13 01:12:48 +08:00 via iPhone
    坚持一下,习惯就好了。我开始也不喜欢,现在两种写法都无感了,团队需要怎么写,我就怎么写。

    我从开发者的角度感觉不出明显的好坏,但传说 hooks 的运行速度快 30%,所以新项目多用 hooks
    Procumbens
        17
    Procumbens   2020-09-13 01:19:26 +08:00   ❤️ 2
    @murmur #7
    什么叫没有 idea 这么牛逼的 ide 帮你自动补全 VS Code + ES 7 React/Redux/GraphQL/React-Native snippets 打个 c 就可以选择 lifecycle function 了
    timicoder
        18
    timicoder   2020-09-13 08:37:29 +08:00 via Android
    是不是就是 class 的继承呀
    ruandao
        19
    ruandao   2020-09-13 08:48:42 +08:00
    要不你试试 mobx
    wxsm
        20
    wxsm   2020-09-13 10:29:34 +08:00 via iPhone
    hooks 确实是一种进步,class 继承复用是硬伤。但是 hooks 学习成本较高,如果没有透彻的理解,半路上车开发很容易掉进坑里。这一点不如 class 明朗。
    wxsm
        21
    wxsm   2020-09-13 10:40:39 +08:00 via iPhone   ❤️ 1
    我举一个常见的例子,你要如何在 usecallback 里面访问变化的 state ?也许初学者会觉得直接访问就可以了,但是实际上不行。你必须用 useref 再对 state 进行一次包装,不然取到的永远是 state 的初始值。特别麻烦。相比来说,class 就简洁明朗得多。有些人就是无理由地喜欢函数式组件,简直跟处女情结一样,我觉得大可不必,这事要辩证地看。
    amundsen
        22
    amundsen   2020-09-13 10:43:28 +08:00
    我写 hooks 写的很爽,class 组件完全被抛弃了。
    vision1900
        23
    vision1900   2020-09-13 11:24:21 +08:00
    使用自定义 hook 时候简直像魔法
    魔法是个好东西,因为神奇
    魔法不是个好东西,因为神奇
    StephenHe
        24
    StephenHe   2020-09-13 13:33:00 +08:00
    感觉是 class 跟 hooks 一起用的问题。建议项目单用 class 、单用 hooks 。
    mxT52CRuqR6o5
        25
    mxT52CRuqR6o5   2020-09-13 13:57:13 +08:00   ❤️ 2
    官方说是推荐新代码全部用 hooks,我个人的实际体验是用 hooks 要把 class component 的生命周期那套东西全都忘掉,就像张三丰学太极拳那样
    haleyao
        26
    haleyao   2020-09-13 17:49:21 +08:00
    react-hooks 这么好用的东西都变成心智负担了,你们开发者真难伺候🐶
    azcvcza
        27
    azcvcza   2020-09-14 09:52:13 +08:00
    @wxsm 不用 ref,玩定时器总是会出错。
    devwolf
        28
    devwolf   2020-09-14 10:56:16 +08:00
    @murmur 确实是两种思维方式啊,这点无可厚非。
    但要说生命周期名称太长不提供补全,楼下也说了 vs code 打上插件照样可以补全。经常忙 react 开发的都能记得常用的生命周期吧,命名挺规律的……

    @Jirajine 我还在想我为什么比起 hooks 更能接受 class 组件,这么看来还真可能因为早期 vue 的熏陶(我个人是先接触的 vue 应付的毕设,然后面到公司让自学转 react 了)
    devwolf
        29
    devwolf   2020-09-14 10:59:16 +08:00
    lz 加油,共勉吧。
    我自己也知道 hooks 是个好东西,加上楼上的大佬们也都分析了,早学会早升值奥
    murmur
        30
    murmur   2020-09-14 11:00:05 +08:00
    @duan602728596 这里又有一个老生常谈的问题,就是 useXXX 判断变量变化的比较标准是什么,新东西肯定会有新坑的
    namelosw
        31
    namelosw   2020-09-14 19:34:37 +08:00 via iPhone
    你不喜欢是因为你不懂函数式编程,并不是 class 的可维护性更好。实际上 class 的可维护性更差。

    要完全融会贯通可以练一练 OCaml 。React 是用 SML 和 OCaml 写的原型,hooks 可以算是回归初心。
    Philippa
        32
    Philippa   2020-09-14 20:48:35 +08:00 via iPhone
    hooks 我喜欢,太多逻辑就自定义 hooks,只要排好版合理分拆其实两种写法区别不大。不过楼主贴的 vue 看起来也不错啊,可要我选还是用 hooks,一般我很排斥包含有属性之类的东西,觉得 hooks 和纯函数写起来少点心智负担。
    KuroNekoFan
        33
    KuroNekoFan   2020-09-16 15:28:54 +08:00
    @wxsm 可以考虑用 setState 用函数形式然后再把参数原封不动返回去,没必要用 useRef,官方文档本身也不推荐用 useRef
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2229 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 11:42 · PVG 19:42 · LAX 03:42 · JFK 06:42
    ♥ Do have faith in what you're doing.