extra-react-store 0.2.9 → 0.2.10

package/lib/use-selector.js

@@ -1,7 +1,8 @@
-import { useCallback, useRef, useSyncExternalStore } from 'react';
-import { useIIFE, useStrictContext } from 'extra-react-hooks';
+import { useRef } from 'react';
+import { useIIFE, useForceUpdate, useStrictContext } from 'extra-react-hooks';
 import { isReferenceEqual } from 'extra-utils';
 export function useSelector(context, selector, isEqual = isReferenceEqual) {
+    const forceUpdate = useForceUpdate();
     const store = useStrictContext(context);
     const updateRequireRef = useRef(true);
     useIIFE(() => {
@@ -14,22 +15,22 @@ export function useSelector(context, selector, isEqual = isReferenceEqual) {
         valueRef.current = selector(store.getState());
         updateRequireRef.current = false;
     }
-    const getSnapshot = useCallback(() => valueRef.current, [valueRef]);
-    return useSyncExternalStore(useCallback((onStoreChange) => {
+    useIIFE(() => {
         return store.subscribe(state => {
             try {
                 const newValue = selector(state);
                 if (!isEqual(valueRef.current, newValue)) {
                     valueRef.current = newValue;
                     updateRequireRef.current = false;
-                    onStoreChange();
+                    forceUpdate();
                 }
             }
             catch {
                 updateRequireRef.current = true;
-                onStoreChange();
+                forceUpdate();
             }
         });
-    }, [store, selector, isEqual, updateRequireRef, valueRef]), getSnapshot, getSnapshot);
+    }, [store, selector, isEqual, forceUpdate, valueRef, updateRequireRef]);
+    return valueRef.current;
 }
 //# sourceMappingURL=use-selector.js.map

package/lib/use-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-selector.js","sourceRoot":"","sources":["../src/use-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE9C,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC,EACjC,UAA2C,gBAAgB;IAE3D,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEvC,MAAM,gBAAgB,GAAG,MAAM,CAAU,IAAI,CAAC,CAAA;IAC9C,OAAO,CAAC,GAAG,EAAE;QACX,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;QACjC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,QAAQ,GAAG,MAAM,CAAQ,SAAS,CAAC,CAAA;IACzC,IAAI,gBAAgB,CAAC,OAAO,EAAE,CAAC;QAC7B,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QAC7C,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAA;IAClC,CAAC;IAED,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IACpE,OAAO,oBAAoB,CACzB,WAAW,CAAC,CAAC,aAAyB,EAAE,EAAE;QACxC,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7B,IAAI,CAAC;gBACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;gBAEhC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;oBAC1C,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAA;oBAC3B,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAA;oBAChC,aAAa,EAAE,CAAA;gBACjB,CAAC;YACH,CAAC;YAAC,MAAM,CAAC;gBACP,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;gBAC/B,aAAa,EAAE,CAAA;YACjB,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,CAAC,CAAC,EAC1D,WAAW,EACX,WAAW,CACZ,CAAA;AACH,CAAC"}
+{"version":3,"file":"use-selector.js","sourceRoot":"","sources":["../src/use-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE9C,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC,EACjC,UAA2C,gBAAgB;IAY3D,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IACpC,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEvC,MAAM,gBAAgB,GAAG,MAAM,CAAU,IAAI,CAAC,CAAA;IAC9C,OAAO,CAAC,GAAG,EAAE;QACX,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;QACjC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,QAAQ,GAAG,MAAM,CAAQ,SAAS,CAAC,CAAA;IACzC,IAAI,gBAAgB,CAAC,OAAO,EAAE,CAAC;QAC7B,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QAC7C,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAA;IAClC,CAAC;IAED,OAAO,CAAC,GAAG,EAAE;QACX,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7B,IAAI,CAAC;gBACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;gBAEhC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;oBAC1C,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAA;oBAC3B,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAA;oBAChC,WAAW,EAAE,CAAA;gBACf,CAAC;YACH,CAAC;YAAC,MAAM,CAAC;gBACP,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;gBAC/B,WAAW,EAAE,CAAA;YACf,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAEvE,OAAO,QAAQ,CAAC,OAAQ,CAAA;AAC1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-store",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "",
   "keywords": [],
   "files": [

package/src/use-selector.ts

@@ -1,5 +1,5 @@
-import { useCallback, useRef, useSyncExternalStore } from 'react'
-import { useIIFE, useStrictContext } from 'extra-react-hooks'
+import { useRef } from 'react'
+import { useIIFE, useForceUpdate, useStrictContext } from 'extra-react-hooks'
 import { StoreContext } from './types.js'
 import { isReferenceEqual } from 'extra-utils'
 
@@ -8,6 +8,17 @@ export function useSelector<State, Value>(
 , selector: (state: State) => Value
 , isEqual: (a: Value, b: Value) => boolean = isReferenceEqual
 ): Value {
+  // 可以用React 18的useSyncExternalStore, 但毫无必要:
+  // - useSyncExternalStore的实现比现有实现的性能差.
+  // - useSyncExternalStore的实现包含现有实现的一部分功能, 但不支持自定义isEqual.
+  //   为了支持isEqual, useSelector需要重复一部分useSyncExternalStore逻辑, 完全是白费功夫.
+  // - useSyncExternalStore在内部也使用setState, 而且实现方式比useForceUpdate差.
+  //   这导致useSyncExternalStore不仅性能差,
+  //   还共享了useForceUpdate的全部弊端(渲染时跨组件setState会报错).
+  // - useSyncExternalStore为了支持SSR需要额外提供一个getServerSnapshot.
+  //   但对于一个状态管理库而言, getSnapshot和getServerSnapshot必然是等价的, 毫无区分的必要性.
+
+  const forceUpdate = useForceUpdate()
   const store = useStrictContext(context)
 
   const updateRequireRef = useRef<boolean>(true)
@@ -23,25 +34,22 @@ export function useSelector<State, Value>(
     updateRequireRef.current = false
   }
 
-  const getSnapshot = useCallback(() => valueRef.current!, [valueRef])
-  return useSyncExternalStore(
-    useCallback((onStoreChange: () => void) => {
-      return store.subscribe(state => {
-        try {
-          const newValue = selector(state)
+  useIIFE(() => {
+    return store.subscribe(state => {
+      try {
+        const newValue = selector(state)
 
-          if (!isEqual(valueRef.current!, newValue)) {
-            valueRef.current = newValue
-            updateRequireRef.current = false
-            onStoreChange()
-          }
-        } catch {
-          updateRequireRef.current = true
-          onStoreChange()
+        if (!isEqual(valueRef.current!, newValue)) {
+          valueRef.current = newValue
+          updateRequireRef.current = false
+          forceUpdate()
         }
-      })
-    }, [store, selector, isEqual, updateRequireRef, valueRef])
-  , getSnapshot
-  , getSnapshot
-  )
+      } catch {
+        updateRequireRef.current = true
+        forceUpdate()
+      }
+    })
+  }, [store, selector, isEqual, forceUpdate, valueRef, updateRequireRef])
+
+  return valueRef.current!
 }