flooks 是一个 React 状态管理器，可自动优化性能，"非必要不 re-render"。

flooks v6

现发布 flooks v6：github.com/nanxiaobei/…

使用方式相对 v5 有些变化。

如何使用

yarn add flooks

import create from 'flooks';

const useCounter = create((store) => ({
  count: 0,
  add() {
    const { count } = store();
    store({ count: count + 1 });
  },
}));

function Counter() {
  const { count, add } = useCounter();

  return (
    <div>
      <p>{count}</p>
      <button onClick={add}>+</button>
    </div>
  );
}

将初始化 state 的函数传入 create，参数中可拿到 store 函数。

store 是一个 getter，同时是一个 setter，用来获取 state 与更新 state。

store 的使用方式类似 jQuery 的 API，比如 api.jquery.com/text/

自动优化性能

在 flooks 的设计中，create 返回一个 hook。

将此 hook 在组件中使用，可解构出 state 中的数据与方法。

此时，仅解构出的数据变化时，会触发 re-render。

其它未用到的数据（未解构出），便于组件毫无关系，绝不触发组件 re-render。

同时，解构出的方法是 "稳定" 的，永远不变，绝不触发组件 re-render。

此设计保证了 state 的数据与方法写在一起，方便组织数据。

同时在使用时，隔离了各个数据，使它们不会牵一发而动全身，从而实现了性能自动优化。

自动 loading

flooks 还有一个额外的功能，即异步方法的自动 loading state。

如果一个方法，比如 getList，是发送一个请求（为 async 函数或返回一个 Promise）。

此时在组件中，便可直接使用 getList.loading 为此异步方法的 loading，免去了自行处理 loading 的大量重复代码。

同时，这个 .loading 也是 "自动优化性能" 的，即除非用到，要不然不会触发额外渲染。

因为在类似设计中，即使 loading 没用到，也会在发请求时将 loading 设为 true，请求完设为 false，触发不必要的 re-render。

而 flooks 的自动优化完全杜绝了这一点，性能最优化，绝无额外 re-render。

欢迎尝试 👏🏻

flooks v6，自动优化性能的 React 状态管理器，欢迎尝试~

github.com/nanxiaobei/…