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

useConext or redux or 状态提升?

  •  1
     
  •   ChrisV5 · 103 天前 · 1639 次点击
    这是一个创建于 103 天前的主题,其中的信息可能已经有所发展或是发生改变。

    举例一个场景

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

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

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

    各位是用哪种?

    24 条回复    2021-10-11 09:01:05 +08:00
    ChrisV5
        1
    ChrisV5   103 天前
    这种不算父子组件传值,算是兄弟组件传值?
    ChrisV5
        2
    ChrisV5   103 天前
    redux 还有一个问题是全局数据。就意味着你有多个比较相似的 Filter 的时候,用一套 type&reducers 就会互相污染,用多套,代码就写恶心了。

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

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

    三大 spa 框架我都用过,angular 是最完善的,全套官方功能即可满足绝大多数项目需求,不像 react 还得用一堆第三方库
    sjhhjx0122
        19
    sjhhjx0122   102 天前
    @Rocketer angular 一个 service 配合 rxjs 就能解决实在是舒服
    SHF
        20
    SHF   101 天前
    你需要把状态和组件解耦,抽象到一个 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   100 天前
    我用 urlparams 传递参数
    connection
        22
    connection   100 天前
    UI 状态组件内部内聚消化
    业务状态 抽成业务模型 props 给组件消费。
    myCupOfTea
        23
    myCupOfTea   100 天前
    状态提升,然后把逻辑封装成 hook
    CamD
        24
    CamD   51 天前 via iPhone
    用了 mobx 后越来越抗拒 redux,建议楼主也来尝试一下
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3321 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 04:08 · PVG 12:08 · LAX 20:08 · JFK 23:08
    ♥ Do have faith in what you're doing.