refactor(@rallie/react): refactor the implementation of useBlockState

ralliejs · Aug 12, 2023 · a2385a7 · a2385a7
1 parent da20c33
commit a2385a7
Show file tree

Hide file tree

Showing 4 changed files with 2,195 additions and 2,010 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -22,7 +22,7 @@
     "url": "https://github.com/ralliejs/rallie/issues"
   },
   "peerDependencies": {
-    "@rallie/block": "^0.6.0",
+    "@rallie/block": ">=0.16.0",
     "react": ">=16.8.0"
   },
   "devDependencies": {

diff --git a/packages/react/src/hooks.ts b/packages/react/src/hooks.ts
@@ -1,21 +1,31 @@
 import React from 'react'
 import type { BaseBlock, CreatedBlock } from '@rallie/block'
 
+const useForceUpdate = () => {
+  const [, setState] = React.useState({})
+  const forceUpdate = React.useCallback(() => {
+    setState({})
+  }, [])
+  return forceUpdate
+}
+
 export function useBlockState<T extends BaseBlock<unknown>, U>(
   block: T,
   getter: (state: T['state']) => U,
   deps: any[] = [],
 ) {
-  const [value, setValue] = React.useState<U>(() => getter(block.state))
+  const forceUpdate = useForceUpdate()
+  const valueRef = React.useRef<U>(getter(block.state))
   React.useEffect(() => {
     const unwatch = block.watchState(getter).do((val) => {
-      setValue(() => val)
+      valueRef.current = val
+      forceUpdate()
     })
     return () => {
       unwatch()
     }
-  }, [...deps]) // eslint-disable-line react-hooks/exhaustive-deps
-  return value
+  }, [forceUpdate, ...deps]) // eslint-disable-line react-hooks/exhaustive-deps
+  return valueRef.current
 }
 
 export function useBlockEvents<T extends BaseBlock<unknown>>(

diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -34,8 +34,8 @@
     "url": "https://github.com/ralliejs/rallie/issues"
   },
   "peerDependencies": {
-    "@rallie/block": "^0.6.0",
-    "vue": ">=2.0.0"
+    "@rallie/block": ">=0.16.0",
+    "vue": ">=2.7.0"
   },
   "devDependencies": {
     "@rallie/block": "workspace:*"