V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
coraline
V2EX  ›  分享创造

React 状态管理非常多,但这个基本是最简单最纯粹的了

  •  
  •   coraline · 2019-05-23 16:45:51 +08:00 · 4372 次点击
    这是一个创建于 2019 天前的主题,其中的信息可能已经有所发展或是发生改变。

    nycticorax 是一个 JavaScript 应用状态管理器,并且默认集成 React 使用

    项目地址

    在 React 上使用非常简单,只需要用 connect 这个 API,没有 Providerreduceraction 等概念

    同时也有在内部 /个人的一些项目上使用了,感觉不错

    使用

    0.首先要安装吧

    $ npm i nycticorax
    

    1.创建 store,正常的操作了。当然也可以忽略这个步骤,不创建 store,不检查数据类型以及是否存在当前 key,非常自由吧 :)

    import { createStore } from 'nycticorax'
    
    createStore({ name: 0 })
    

    2.然后需要关联起 view 跟 store 吧,不然咋知道那些需要视图更新

    import { connect } from 'nycticorax'
    
    function A({ dispatch, name }) { // connect 过的组件可以使用 dispatch
      return (
        <div>
          <p>{name}</p> {/* 使用 store name 的值 */}
          <button 
            onClick={() => dispatch({ name: 1 })} {/* 这里 dispatch 改变 store 里的 name 的值为 1 */}
          >
            set
          </button>
        </div>
      )
    }
    
    export default connect('name')(A) // 这里是 connect,表示需要使用 stire 中的 name 的值
    

    然后就这样可以啦,也不需要像 Redux 那样需要 Provider 在最外层包裹容器。

    其他

    其他一些高级说明及设置可以看项目说明,具体有以下

    • 严格模式 /非严格模式
    • 不同的实例
    • 同步 /异步
    • UMD 使用
    • 非 React 下使用

    对比 Redux

    在我看来,Redux 是一种代码设计模式,强调的是函数式编程,而状态管理只是 Redux 附带的一个功能

    nycticorax 是纯粹的数据状态共享管理器,其工作模式非常直观简洁 dispatch => store => view,也不用画图解释了

    原理也很简单,就是一个事件订阅广播

    至于性能,nycticorax 只有在绑定的 key 值发生变化时候才会更新对应组件,也就是最小化更新,性能不差

    所以综上,我造这个轮子的原因也很明显了:我实在不想写大写字母的 actions 了,包括那些 effects@observer 等等,我只想安静的共享一些数据状态,然后在适当时候更新数据状态,更新对应的视图

    8 条回复    2019-09-24 07:32:00 +08:00
    zhw2590582
        1
    zhw2590582  
       2019-05-23 18:13:48 +08:00 via iPhone
    我觉得可以换个简洁一点的包名
    love
        2
    love  
       2019-05-23 19:17:34 +08:00
    我在用自己包装的 immer,搭配 typescript,全类型覆盖
    coraline
        3
    coraline  
    OP
       2019-05-23 20:04:03 +08:00
    @zhw2590582 确实,nycticorax 这名字我也记不住
    mgso
        4
    mgso  
       2019-05-23 23:11:27 +08:00 via iPhone
    有点意思 赞一个
    afei123
        5
    afei123  
       2019-05-24 19:00:38 +08:00
    涉及到包含异步的 dispatch 呢?或者想结合几个 state 形成一个 getter 呢?简单的东西都是开始简单,还不如上来就用大而全但只用它简单的部分,要不后面自己给自己轮子打补丁真的痛苦。
    coraline
        6
    coraline  
    OP
       2019-05-24 19:42:05 +08:00
    @afei123 相关高级用法文档里面有说明,这里这是列简单用法
    alexmy
        7
    alexmy  
       2019-05-25 10:31:03 +08:00
    mobx 感觉就很棒了。没经历过很大型的前端项目,小项目真的很简洁好用。
    fantasticsoul
        8
    fantasticsoul  
       2019-09-24 07:32:00 +08:00
    非常不错的小库哦,不过你可可以了解下 concent, 一个可预测、0 入侵、渐进式、高性能的增强型 react 状态管理方案,全方位提升你的 react 编码体验!
    可中心化也可以去中心化的配置和管理 model,携带 computed, watch, effect, emit&on, sync,setup 等增强特性。
    内置了 renderKey、lazyDispatch、delayBroadcast 等性能优化。
    Hoc class, renderProps, hook 三种组件写法高度统一,对于 concent 来说,它们只是渲染的载体,注入的核心 api 是 concent 的灵魂。

    setup 特性
    https://stackblitz.com/edit/hook-setup
    renderKey,长列表精准渲染,缩小渲染范围
    https://stackblitz.com/edit/hook-setup
    lazyDispatch,状态变更合并提交,减少渲染次数
    https://stackblitz.com/edit/concent-lazy-dispatch
    delayBroadcast,高频输入延迟广播,降低渲染频率
    https://stackblitz.com/edit/concent-delay-broadcast
    一个相对复杂的示例
    https://stackblitz.com/edit/cc-multi-ways-to-wirte-code

    antd-pro-concent
    https://github.com/concentjs/antd-pro-concent

    更多特性可以阅读官网文档:
    https://concentjs.github.io/concent-doc
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4337 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 05:32 · PVG 13:32 · LAX 21:32 · JFK 00:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.