@violetflux/kerros 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -2
- package/README.zh-CN.md +5 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<p align="center">
|
|
2
2
|
<a href="https://violetflux.github.io/kerros/">
|
|
3
|
-
<img src="https://raw.githubusercontent.com/violetflux/kerros/main/docs/public/banner.svg" alt="Kerros —
|
|
3
|
+
<img src="https://raw.githubusercontent.com/violetflux/kerros/main/docs/public/banner.svg" alt="Kerros — share state between React components" width="100%" />
|
|
4
4
|
</a>
|
|
5
5
|
</p>
|
|
6
6
|
|
|
@@ -41,7 +41,8 @@ React 17, React 18, and React 19 are supported.
|
|
|
41
41
|
- **Almost nothing new to learn** — reuse the React knowledge you already have; if you can write a custom Hook, you can write a Store
|
|
42
42
|
- **Designed for flexible refactoring** — Stores and components use the same Hook API, so local state can become shared state with very little work
|
|
43
43
|
- **Local and application-wide state** — Provider placement determines the Store scope, balancing flexibility with simplicity
|
|
44
|
-
- **
|
|
44
|
+
- **Avoid Context-wide rerenders** — Context carries a stable container and components rerender only when their selector result changes
|
|
45
|
+
- **TypeScript support** — Store and selector types are inferred without duplicate declarations
|
|
45
46
|
|
|
46
47
|
## From state management to state sharing
|
|
47
48
|
|
|
@@ -51,6 +52,8 @@ Kerros focuses on a smaller and more direct problem. It does not invent a new da
|
|
|
51
52
|
|
|
52
53
|
Passing `value` and `onChange` through layer after layer damages component boundaries. Moving everything into one global Store does not automatically make an application scalable or maintainable either.
|
|
53
54
|
|
|
55
|
+
Sharing frequently changing state through React Context directly also causes repeated work: every Context value change rerenders all consumers. Kerros keeps Provider scoping and multiple instances, but Context carries only a stable container. Components subscribe through selectors and rerender only when their selected result changes.
|
|
56
|
+
|
|
54
57
|
Kerros stays simple, lightweight, and reliable. Write local state as an ordinary Hook, share it only when necessary, use a Provider to set its scope, and use selectors to choose what each component observes.
|
|
55
58
|
|
|
56
59
|
## Quick start
|
package/README.zh-CN.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<p align="center">
|
|
2
2
|
<a href="https://violetflux.github.io/kerros/zh/">
|
|
3
|
-
<img src="https://raw.githubusercontent.com/violetflux/kerros/main/docs/public/banner.svg" alt="Kerros —
|
|
3
|
+
<img src="https://raw.githubusercontent.com/violetflux/kerros/main/docs/public/banner.svg" alt="Kerros — 在 React 组件间共享状态" width="100%" />
|
|
4
4
|
</a>
|
|
5
5
|
</p>
|
|
6
6
|
|
|
@@ -34,7 +34,8 @@ Kerros 是一个在 React 组件间共享状态的轻量方案。
|
|
|
34
34
|
- **几乎没有学习成本**:直接复用已有的 React 知识,你怎么写 custom Hook,就可以怎么写 Store
|
|
35
35
|
- **为灵活重构而设计**:Store 和组件使用同一套 Hook API,可以近乎零成本地把组件局部状态转换成组件间共享状态
|
|
36
36
|
- **同时支持局部状态和全局状态**:Provider 决定 Store 的作用域,在灵活和简单之间取得平衡
|
|
37
|
-
-
|
|
37
|
+
- **解决 Context 的重复渲染问题**:Context 只传递稳定容器,selector 选择结果不变的组件不会重渲染
|
|
38
|
+
- **优秀的 TypeScript 支持**:Store 和 selector 类型自动推断,不需要重复声明
|
|
38
39
|
|
|
39
40
|
## 从状态管理到状态共享
|
|
40
41
|
|
|
@@ -44,6 +45,8 @@ Kerros 想解决的问题更小,也更直接。它不发明新的数据结构
|
|
|
44
45
|
|
|
45
46
|
层层传递 `value`、`onChange` 会逐渐破坏组件边界;粗暴地把数据全部塞进一个全局 Store,也不会自动让应用获得更好的扩展性和可维护性。
|
|
46
47
|
|
|
48
|
+
直接用 React Context 共享变化频繁的状态也会带来重复渲染:Context value 每次变化,所有消费者都会更新。Kerros 保留 Provider 的作用域和多实例能力,但 Context 只传递稳定容器;组件通过 selector 订阅数据,只有选择结果变化时才重渲染。
|
|
49
|
+
|
|
47
50
|
Kerros 简单、轻量、可靠。先把状态写成普通 Hook,需要共享时再交给 `createStore`;Provider 决定状态共享到哪里,selector 决定每个组件订阅什么。
|
|
48
51
|
|
|
49
52
|
## 快速上手
|