feat(react): 新增 useStaged 暂存状态

src/react/index.ts

@@ -129,6 +129,7 @@ export * from './useEnvironment'
 export * from './useLoadMore'
 export * from './useReachBottom'
 export * from './useScrollLoadMore'
+export * from './useStaged'
 export * from './useStateWithDeps'
 export * from './useValidator'
 // @endindex

src/react/useStaged.test.ts

@@ -0,0 +1,40 @@
+import { act, renderHook } from '@testing-library/react-hooks'
+import { useStaged } from './useStaged'
+import { useState } from 'react'
+
+describe('useStaged', () => {
+  test('表现正常', () => {
+    const { result } = renderHook(() => {
+      const [counter, setCounter] = useState(1)
+      const [stagedCounter, setStagedCounter, commitStagedCounter] = useStaged(
+        counter,
+        setCounter,
+      )
+      return {
+        counter,
+        setCounter,
+        stagedCounter,
+        setStagedCounter,
+        commitStagedCounter,
+      }
+    })
+    expect(result.current.counter).toBe(1)
+    expect(result.current.stagedCounter).toBe(1)
+
+    act(() => result.current.setStagedCounter(2))
+    expect(result.current.counter).toBe(1)
+    expect(result.current.stagedCounter).toBe(2)
+
+    act(() => result.current.setStagedCounter(3))
+    expect(result.current.counter).toBe(1)
+    expect(result.current.stagedCounter).toBe(3)
+
+    act(() => result.current.commitStagedCounter())
+    expect(result.current.counter).toBe(3)
+    expect(result.current.stagedCounter).toBe(3)
+
+    act(() => result.current.setCounter(0))
+    expect(result.current.counter).toBe(0)
+    expect(result.current.stagedCounter).toBe(0)
+  })
+})

src/react/useStaged.ts

@@ -0,0 +1,19 @@
+import { useCallback } from 'react'
+import { useLatest } from 'react-use'
+import { useStateWithDeps } from './useStateWithDeps'
+
+/**
+ * 暂存状态。
+ */
+export function useStaged<T extends any, F extends (value: T) => void>(
+  value: T,
+  setValue: F,
+): [T, F, () => void] {
+  const [stagedState, setStagedState] = useStateWithDeps(value, [value])
+  const setValueRef = useLatest(setValue)
+  const stagedStateRef = useLatest(stagedState)
+  const commitStagedState = useCallback(() => {
+    setValueRef.current(stagedStateRef.current)
+  }, [])
+  return [stagedState, setStagedState, commitStagedState] as any
+}