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

撸了个 hook 来实现组件间 state 共享

  •  1
     
  •   nekocode ·
    nekocode · 2020-01-24 21:49:37 +08:00 · 3076 次点击
    这是一个创建于 1763 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近刚接触 react 没多久,参考了 flutter 里的一些实现撸了个轻量级的轮子来实现组件间 state 共享:

    GitHub 仓库

    特点:

    • 轻量级,比 redux 简单,可以在库工程里使用
    • 体积小,不足 1kb
    • 最小范围的重新渲染。例如下图 b 和 e 共享 state,当 state 值变化时只重新渲染 b 和 e:
      a
    +-+-+
    | | |
    b c d
        |
        e
    
    • 允许在 state 值指定字段发生变化时才重新渲染组件:
    // 获取共享的 state,且在 age 字段发生变化时才更新被 hook 的组件
    const state= useSharedState<User>(UserContext, (current, prev) => current?.age !== prev?.age);
    
    1 条回复    2020-01-25 09:19:48 +08:00
    vicvinc
        1
    vicvinc  
       2020-01-25 09:19:48 +08:00 via iPhone
    m k
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1056 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 19:13 · PVG 03:13 · LAX 11:13 · JFK 14:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.