先聊聊为啥要自己写状态管理库

说实话，hen多时候我们在项目里用了 Redux、MobX，结果发现它们太重。

哈哈，别说我也曾被那些层层嵌套的 Provider 折磨到想把键盘扔窗外。

咱就是说轻量级的状态管理库Neng让代码geng干净，调试geng直接。

那今天咱们就从零开始撸一个叫 MiniStore 的小玩意儿。

先明确几个目标：

1）体积尽可Neng小，几KB就Neng跑完。

2）API 超简洁，一行代码就Neng创建 store。

3）支持选择器，只订阅关心的 slice。

4）兼容 React 18 的 useSyncExternalStore。

嗯，不对不对，这里其实不需要列序号，直接说：我们要轻、快、准。

把状态放进闭包里外部只Neng通过提供的 API 操作。

每次 setState dou会遍历一遍订阅者集合，把Zui新 state 和旧 state 丢过去。

订阅者自己负责判断是否需要geng新——这就是所谓的“精准geng新”。

function createStore {
  let state;
  const listeners = new Set;
  const getState =  => state;
  const setState =  => {
    const next = typeof partial === 'function' ? partial : partial;
    if ) return;
    const prev = state;
    state = replace ? next : Object.assign;
    listeners.forEach);
  };
  const subscribe =  => {
    listeners.add;
    return  => listeners.delete;
  };
  const api = { getState, setState, subscribe };
  state = initializer;
  return api;
}

这里用了 Object.assign Zuo浅合并，保持 API 简单易懂。

import { useSyncExternalStore } from 'react';
function useStore {
  const snapshot = useSyncExternalStore(
    store.subscribe,
     => selector)
  );
  return snapshot;
}

哎呀，我差点忘了加个默认 selector，要不然每次dou得手动写。哈哈，这里默认返回整个 state。

const useAppStore = create => ({
  count: 0,
  text: '你好世界',
  inc:  => set),
  setText:  => set
}));

function CountDisplay {
  console.log;
  const count = useStore;
  const inc   = useStore;
  return (
    

      
计数：{count}
      +1
    
 );
}

function TextEditor {
  console.log;
  const text     = useStore;
  const setText = useStore;
  return (
    

      
当前文本：{text}
      setText} />
    
 );
}

注意kan，这两个组件只会在各自关注的数据变化时重新渲染，互不干扰——这就是选择器的威力。

问：我的博客页面用了hen多 JS 动态渲染，百度搜索总是抓不到内容，怎么办？

答：百度爬虫对 SPA 支持不佳，它主要抓取首屏的静态 HTML。Ru果你想让页面被收录，Ke以在服务器端预渲染或使用静态化工具把关键内容写入初始 HTML 中。还有一点别忘了在 加上合理的 , 并确保 robots.txt 没拦住。懂了吧？咱就是说这招对大多数框架dou适用，包括你刚写的 MiniStore 示例页面。

function batchUpdate {
   // 同步多次 setState，只触发一次通知
   updates.forEach);
}
// 示例
batchUpdate();