返回

更简单一点,一个独有的 React 状态管理器

前端

更简单一点,一个独有的 React 状态管理器

flooks 是什么?

flooks 是一个用最简单的理念设计的一个React 状态管理工具。

flooks 1.0 的问题

  1. flooks 1.0 为了简化使用,使用了 useModel() 传入字符串的方式,从而无需引入文件获取 model。 但重新考虑后,这违反了 React 的固有理念,即组件应该只负责自己的状态,不应对其他组件的状态进行管理。
  2. flooks 1.0 和redux 一样,只能保持单线程。但是 React 的基本理念就是组件可以各自进行并发的、异步的运算。
  3. flooks 1.0 使用的方法只适合 Redux、xState、Vuex 和其他具有中心化状态和单向数据流的框架。但它并不适合 React。因为 React 有自己的独特的特点,比如组件可以并发渲染,状态可以是异步的。
  4. flooks 1.0 还使用的是 useReducer() 来实现状态管理。 而 useReducer() 只能使用一个 reducer,这可能会导致代码变得难以维护。

那么,flooks 2.0 有什么不同?

  1. 更简单: flooks 2.0 的 API 更加简单,学习起来更容易。
  2. 更灵活: flooks 2.0 允许你使用不同的 reducer 来管理不同的状态。
  3. 更强大: flooks 2.0 支持并发渲染和异步状态管理。
  4. 更适合 React: flooks 2.0 的设计理念与 React 更加契合。

如何使用 flooks 2.0?

  1. 安装 flooks 2.0:
npm install flooks
  1. 在你的 React 项目中导入 flooks 2.0:
import { useModel } from 'flooks';
  1. 创建你的模型:
const model = {
  name: 'John Doe',
  age: 30
};
  1. 使用 useModel() hook 来访问你的模型:
const { name, age } = useModel(model);
  1. 使用你的状态:
<h1>{name}</h1>
<p>{age}</p>

flooks 2.0 的优点

  1. 更简单: flooks 2.0 的 API 更加简单,学习起来更容易。
  2. 更灵活: flooks 2.0 允许你使用不同的 reducer 来管理不同的状态。
  3. 更强大: flooks 2.0 支持并发渲染和异步状态管理。
  4. 更适合 React: flooks 2.0 的设计理念与 React 更加契合。

结论

flooks 2.0 是一个更简单、更灵活、更强大、更适合 React 的状态管理器。如果你正在寻找一个新的状态管理器,我强烈推荐你尝试一下 flooks 2.0。