一个tsx同时可以被当成应用，又能被当做组件使用，称为「分形架构」

1
2
3
4
5
6
7
8
9

type IconPickerProps = StoreUpdaterProps;
const IconPicker: FC<IconPickerProps> = (props) => {
  return (
    <Provider createStore={createStore}>
      <App />
      <StoreUpdater {...props} />
    </Provider>
  );
};

就是我们拿来需要分形的tsx,最终包装成IconPicker提供出去

1. useStoreUpdater ：将外部的 props 同步到 store 内部的方法

   1 2 3 4 5 6 7 8 9 10 11 12 13

   /** * 更新方法 */ export const useStoreUpdater = (key: keyof T, value: any, deps = [value], updater?) => { const store = useStoreApi(); useEffect(() => { if (typeof value !== 'undefined') { store.setState({ [key]: value }); } }, deps); };

2. StoreUpdaterProps：从 store 的 State 中 pick 出需要受控的状态，并相应补充 defaultXX 的 props

   1 2 3 4 5 6 7

   export interface StoreUpdaterProps extends Partial<Pick< State, | 'icon' | 'onIconChange' | 'iconfontScripts' | 'onIconfontScriptsChange' > > { defaultIcon?: IconUnit; }

3. StoreUpdater：逐一补充调用外部组件 props 的受控状态，将外部 props 更新到 store 的内部状态中；

   1 2 3 4 5 6 7 8 9 10 11

   const StoreUpdater: FC<StoreUpdaterProps> = ({ icon, defaultIcon, iconfontScripts, }) => { useStoreUpdater('icon', defaultIcon, []); useStoreUpdater('icon', icon); useStoreUpdater('onIconChange', onIconChange); return null; }; export default StoreUpdater;

本文摘抄总结自 谈谈复杂应用的状态管理（下）：基于 Zustand 的渐进式状态管理实践 - 知乎 (zhihu.com)