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

useConext or redux or 状态提升?

  •  1
     
  •   ChrisV5 · 2021-08-20 11:43:22 +08:00 · 3019 次点击
    这是一个创建于 1189 天前的主题,其中的信息可能已经有所发展或是发生改变。

    举例一个场景

    上面是一堆的开关过滤器, 输出一堆参数给 Data 过滤
    <FilterArea/>
    下面是一个 table 展示数据
    <DataArea/>
    
    • 要么在 FilterArea 里面做状态提升
    • 要么在 FilterArea 里面做 useContext ?

    这种会影响代码可读性吧,毕竟 FilterArea 比较偏 UI,可能写在各种表现形式上

    • 要么用 redux 写一大堆各种 types, actions, reducers

    各位是用哪种?

    27 条回复    2022-11-03 14:35:06 +08:00
    ChrisV5
        1
    ChrisV5  
    OP
       2021-08-20 11:54:46 +08:00
    这种不算父子组件传值,算是兄弟组件传值?
    ChrisV5
        2
    ChrisV5  
    OP
       2021-08-20 12:08:01 +08:00
    redux 还有一个问题是全局数据。就意味着你有多个比较相似的 Filter 的时候,用一套 type&reducers 就会互相污染,用多套,代码就写恶心了。

    感觉这种更类似于上下文数据,应该用 Lifting State Up
    walpurgis
        3
    walpurgis  
       2021-08-20 12:12:57 +08:00 via iPhone
    兄弟组件共享显然是把状态提升到父级
    statumer
        4
    statumer  
       2021-08-20 12:30:41 +08:00 via Android
    状态提升,这个业务建议别写 redux 写 mobx,别和自己过不去
    Rocketer
        5
    Rocketer  
       2021-08-20 13:51:15 +08:00 via iPhone   ❤️ 2
    99%的项目不需要 redux,useContext 足够了。有机会做那 1%的人也不会来问这种问题。

    所以,若非接手现有的代码,不要考虑 redux,开发速度慢,运行速度慢,太重了
    XTTX
        6
    XTTX  
       2021-08-20 14:25:55 +08:00
    1.除非参数在 app 各个地方都有用到, 不然 props 传输就是最好的办法。
    2.如果<DataArea/>的所需参数除了<FilterArea/>能输出,还有其他地方也能输出,props 也是最好的办法。
    wuchangming89
        7
    wuchangming89  
       2021-08-20 15:31:24 +08:00
    @statumer,同意,写业务项目直接 Mobx,业务与 UI 分离,MVVM 效率也高。如果写开源库组件库什么的另说
    dcalsky
        8
    dcalsky  
       2021-08-20 15:39:30 +08:00
    其实 mobx 写起来也蛮快的,编码效率跟 useContext 差不多,关键是还不用自己填一堆坑。
    zoeliu
        9
    zoeliu  
       2021-08-20 15:48:52 +08:00 via Android
    状态提升 context 就可以。最近有复杂度不高的项目涉及全局状态传递使用的 useContext + useReducer 。
    seki
        10
    seki  
       2021-08-20 15:52:54 +08:00
    recoil 或者 jotai
    GuguDan
        11
    GuguDan  
       2021-08-20 16:07:02 +08:00
    Stook
    bnm965321
        12
    bnm965321  
       2021-08-20 16:13:21 +08:00
    recoil 谁用谁知道
    hingle
        13
    hingle  
       2021-08-20 17:02:34 +08:00
    recoil + 1
    PeakFish
        14
    PeakFish  
       2021-08-20 17:11:37 +08:00
    各位 eventBus 怎么样?
    @bnm965321
    @dcalsky
    @wuchangming89
    wuchangming89
        15
    wuchangming89  
       2021-08-20 17:20:54 +08:00
    eventBus 和 redux 这些全局变量类的数据管理方案,模块化都不好做,命名空间约定也是麻烦事。如果大项目或者多人合作项目,模块化还是挺重要的。小项目除外,小项目上面说的什么都行。
    ZZITE
        16
    ZZITE  
       2021-08-20 17:34:32 +08:00
    recoil + 1
    prayx
        17
    prayx  
       2021-08-20 18:06:14 +08:00
    推荐个冷漠的库 constate:
    将自定义 hooks 提升到 context
    特别简洁优雅
    Rocketer
        18
    Rocketer  
       2021-08-21 00:16:06 +08:00 via iPhone
    另外说一句,如果可以选择的话,别用 react,试试 angular 。

    三大 spa 框架我都用过,angular 是最完善的,全套官方功能即可满足绝大多数项目需求,不像 react 还得用一堆第三方库
    sjhhjx0122
        19
    sjhhjx0122  
       2021-08-21 11:47:10 +08:00
    @Rocketer angular 一个 service 配合 rxjs 就能解决实在是舒服
    SHF
        20
    SHF  
       2021-08-21 18:32:30 +08:00
    你需要把状态和组件解耦,抽象到一个 model 里,现实情况中有很多逻辑和数据和组件是正交的,多个组件会用多个属性

    可以试试我写的这个:
    react-object-model - 面向对象的 React 状态管理库
    1. 轻量,基于 useState (返回的 setState 具有引用稳定性,可区分组件,调用时能够触发渲染) 和 useEffect (组件卸载时清理订阅关系)
    2. API 简洁、符合直觉,const { name, age } = user.use(['name', 'age']) 即可在 React 组件中完成对 user 模型中 name, age 属性的订阅; user.set({ name: 'Tom' }) 即可更新 user 模型的 name 属性并触发组件渲染
    3. 根据每个组件订阅的模型属性做 diff,与上次相比改变后才更新组件状态,避免不必要的渲染

    https://github.com/ShenHongFei/react-object-model
    cylqd
        21
    cylqd  
       2021-08-22 15:26:08 +08:00
    我用 urlparams 传递参数
    connection
        22
    connection  
       2021-08-22 17:26:10 +08:00
    UI 状态组件内部内聚消化
    业务状态 抽成业务模型 props 给组件消费。
    myCupOfTea
        23
    myCupOfTea  
       2021-08-23 09:19:37 +08:00
    状态提升,然后把逻辑封装成 hook
    CamD
        24
    CamD  
       2021-10-11 09:01:05 +08:00 via iPhone
    用了 mobx 后越来越抗拒 redux,建议楼主也来尝试一下
    charlie21
        25
    charlie21  
       2022-02-24 20:00:17 +08:00
    有时候感觉 react 作为一个仅仅视图层 当然有理由让人去搭配不同的 “搭配”
    但能够有这么多种方式实现一个结果,是很令人意外的,这意味着 react app 和 react app 没什么相似之处
    charlie21
        26
    charlie21  
       2022-02-25 10:48:51 +08:00
    之前不同的人用不同的框架,代码结构千差万别 v2ex.com/t/294276?p=1#r_3395030
    aec4d
        27
    aec4d  
       2022-11-03 14:35:06 +08:00
    jotai + mitt
    值使用 jotai 跨组件
    事件使用 mitt 跨组件
    方便代码组织
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3007 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 14:06 · PVG 22:06 · LAX 06:06 · JFK 09:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.