feat(react): 新增 useStateWithDeps

src/react/index.ts

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

src/react/useStateWithDeps.test.ts

@@ -0,0 +1,68 @@
+import { act, renderHook } from '@testing-library/react-hooks'
+import { useStateWithDeps } from './useStateWithDeps'
+
+describe('useStateWithDeps', () => {
+  test('依赖为空时正常', () => {
+    const { result, rerender } = renderHook(
+      props => {
+        const [id, setId] = useStateWithDeps(props.id, [])
+        return { id, setId }
+      },
+      {
+        initialProps: {
+          id: 1,
+        },
+      },
+    )
+    expect(result.current.id).toBe(1)
+    rerender({ id: 2 })
+    expect(result.current.id).toBe(1)
+    act(() => result.current.setId(2))
+    expect(result.current.id).toBe(2)
+  })
+
+  test('依赖不为空时正常', () => {
+    const { result, rerender } = renderHook(
+      props => {
+        const [id, setId] = useStateWithDeps(props.id, [props.id])
+        return { id, setId }
+      },
+      {
+        initialProps: {
+          id: 1,
+        },
+      },
+    )
+    expect(result.current.id).toBe(1)
+    rerender({ id: 2 })
+    expect(result.current.id).toBe(2)
+    act(() => result.current.setId(3))
+    expect(result.current.id).toBe(3)
+  })
+
+  test('状态为函数时正常', () => {
+    const fn = jest.fn()
+    const { result, rerender } = renderHook(
+      props => {
+        const [id, setId] = useStateWithDeps(() => {
+          fn()
+          return props.id
+        }, [props.id])
+        return { id, setId }
+      },
+      {
+        initialProps: {
+          id: 1,
+        },
+      },
+    )
+    expect(result.current.id).toBe(1)
+    expect(fn).toBeCalled().toBeCalledTimes(1)
+    rerender({ id: 2 })
+    expect(result.current.id).toBe(2)
+    expect(fn).toBeCalled().toBeCalledTimes(2)
+    act(() => result.current.setId(3))
+    expect(result.current.id).toBe(3)
+    expect(fn).toBeCalled().toBeCalledTimes(2)
+  })
+})

src/react/useStateWithDeps.ts

@@ -0,0 +1,20 @@
+import React, { useState } from 'react'
+import { useUpdateEffect } from 'react-use'
+
+/**
+ * 给 useState 插上依赖的翅膀。依赖变化时会更新状态。
+ *
+ * @param state 状态
+ * @param deps 依赖
+ * @returns 返回结果同 useState
+ */
+export function useStateWithDeps<S>(
+  state: S | (() => S),
+  deps: React.DependencyList,
+): [S, React.Dispatch<React.SetStateAction<S>>] {
+  const [value, setValue] = useState(state)
+  useUpdateEffect(() => {
+    setValue(state)
+  }, deps)
+  return [value, setValue]
+}