这是一个创建于 2045 天前的主题，其中的信息可能已经有所发展或是发生改变。
nycticorax 是一个 JavaScript 应用状态管理器，并且默认集成 React 使用
在 React 上使用非常简单，只需要用 connect 这个 API，没有 Provider，reducer，action 等概念
同时也有在内部 /个人的一些项目上使用了，感觉不错
使用
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 等等，我只想安静的共享一些数据状态，然后在适当时候更新数据状态，更新对应的视图
 |
1
zhw2590582 2019-05-23 18:13:48 +08:00 via iPhone
我觉得可以换个简洁一点的包名
|
 |
2
love 2019-05-23 19:17:34 +08:00
我在用自己包装的 immer，搭配 typescript，全类型覆盖
|
 |
3
coraline OP @zhw2590582 确实，nycticorax 这名字我也记不住
|
 |
4
mgso 2019-05-23 23:11:27 +08:00 via iPhone
有点意思 赞一个
|
 |
5
afei123 2019-05-24 19:00:38 +08:00
涉及到包含异步的 dispatch 呢？或者想结合几个 state 形成一个 getter 呢？简单的东西都是开始简单，还不如上来就用大而全但只用它简单的部分，要不后面自己给自己轮子打补丁真的痛苦。
|
 |
7
alexmy 2019-05-25 10:31:03 +08:00
mobx 感觉就很棒了。没经历过很大型的前端项目，小项目真的很简洁好用。
|
 |
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 |
Select Language