From 23108953daff858291b483f3f1ddb03de74b0c7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=BD=E9=BE=99?= Date: Mon, 26 Jul 2021 19:21:50 +0800 Subject: [PATCH 1/2] refactor: usePrevious --- packages/hooks/src/usePrevious/demo/demo2.tsx | 8 +++---- packages/hooks/src/usePrevious/index.en-US.md | 21 ++++++++++--------- packages/hooks/src/usePrevious/index.ts | 12 +++++++---- packages/hooks/src/usePrevious/index.zh-CN.md | 21 ++++++++++--------- 4 files changed, 34 insertions(+), 28 deletions(-) diff --git a/packages/hooks/src/usePrevious/demo/demo2.tsx b/packages/hooks/src/usePrevious/demo/demo2.tsx index a075c91ae7..591064d986 100644 --- a/packages/hooks/src/usePrevious/demo/demo2.tsx +++ b/packages/hooks/src/usePrevious/demo/demo2.tsx @@ -1,9 +1,9 @@ /** - * title: Using compare function - * desc: The stored previous value update only when the compare function returns true. + * title: Custom shouldUpadte function + * desc: The stored previous value update only when the shouldUpadte function returns true. * - * title.zh-CN: 使用 compare function - * desc.zh-CN: 只有 compare function 返回 true 时，才会记录值的变化 + * title.zh-CN: 自定义 shouldUpadte function + * desc.zh-CN: 只有 shouldUpadte function 返回 true 时，才会记录值的变化。 */ import React, { useState } from 'react'; diff --git a/packages/hooks/src/usePrevious/index.en-US.md b/packages/hooks/src/usePrevious/index.en-US.md index 030f449270..9807e201dd 100644 --- a/packages/hooks/src/usePrevious/index.en-US.md +++ b/packages/hooks/src/usePrevious/index.en-US.md @@ -10,8 +10,9 @@ group: # usePrevious -A Hook to store the previous value. + +A Hook to store the previous value. ## Examples @@ -19,7 +20,7 @@ A Hook to store the previous value. -### Using compare function +### Custom shouldUpadte function @@ -28,19 +29,19 @@ A Hook to store the previous value. ```typescript const previousState: T = usePrevious( state: T, - compareFunction: (prev: T | undefined, next: T) => boolean + shouldUpdate?: (prev: T | undefined, next: T) => boolean ); ``` ### Result -| Property | Description | Type | -|---------------|--------------------|------| -| previousState | the previous value | - | +| Property | Description | Type | +|---------------|--------------------|-------| +| previousState | The previous value | `any` | ### Params -| Property | Description | Type | Default | -|-----------------|---------------------------------------------------------------|------|---------| -| state | the state need to be tracked | - | - | -| compareFunction | optional, customize when the previous value need to be stored | (prev: T \| undefined, next: T) => boolean | - | +| Property | Description | Type | Default | +|--------------|---------------------------------------------------------------|----------------------------------------------|---------------------| +| state | The state need to be tracked | `any` | - | +| shouldUpdate | Optional, customize when the previous value need to be stored | `(prev: T \| undefined, next: T) => boolean` | `(a, b) => a !== b` | diff --git a/packages/hooks/src/usePrevious/index.ts b/packages/hooks/src/usePrevious/index.ts index 3a446ab95f..25ece10486 100644 --- a/packages/hooks/src/usePrevious/index.ts +++ b/packages/hooks/src/usePrevious/index.ts @@ -1,13 +1,17 @@ import { useRef } from 'react'; -export type compareFunction = (prev: T | undefined, next: T) => boolean; +export type ShouldUpdateFunc = (prev: T | undefined, next: T) => boolean; -function usePrevious(state: T, compare?: compareFunction): T | undefined { +const defaultShouldUpdate = (a?: T, b?: T) => a !== b; + +function usePrevious( + state: T, + shouldUpdate: ShouldUpdateFunc = defaultShouldUpdate, +): T | undefined { const prevRef = useRef(); const curRef = useRef(); - const needUpdate = typeof compare === 'function' ? compare(curRef.current, state) : true; - if (needUpdate) { + if (shouldUpdate(curRef.current, state)) { prevRef.current = curRef.current; curRef.current = state; } diff --git a/packages/hooks/src/usePrevious/index.zh-CN.md b/packages/hooks/src/usePrevious/index.zh-CN.md index a086bc74d3..3ec2735f3c 100644 --- a/packages/hooks/src/usePrevious/index.zh-CN.md +++ b/packages/hooks/src/usePrevious/index.zh-CN.md @@ -10,8 +10,9 @@ group: # usePrevious -保存上一次渲染时状态的 Hook。 + +保存上一次状态的 Hook。 ## 代码演示 @@ -19,7 +20,7 @@ group: -### 使用 compare function +### 自定义 shouldUpadte function @@ -28,19 +29,19 @@ group: ```typescript const previousState: T = usePrevious( state: T, - compareFunction: (prev: T | undefined, next: T) => boolean + shouldUpdate?: (prev: T | undefined, next: T) => boolean ); ``` ### Result -| 参数 | 说明 | 类型 | -|---------------|-----------------|------| -| previousState | 上次 state 的值 | - | +| 参数 | 说明 | 类型 | +|---------------|-----------------|-------| +| previousState | 上次 state 的值 | `any` | ### Params -| 参数 | 说明 | 类型 | 默认值 | -|-----------------|--------------------------|------|--------| -| state | 需要记录变化的值 | - | - | -| compareFunction | 可选，自定义值变化的规则 | (prev: T \| undefined, next: T) => boolean | - | +| 参数 | 说明 | 类型 | 默认值 | +|--------------|----------------------------|----------------------------------------------|---------------------| +| state | 需要记录变化的值 | `any` | - | +| shouldUpdate | 可选，自定义判断值是否变化 | `(prev: T \| undefined, next: T) => boolean` | `(a, b) => a !== b` | From d41d5f4597c59c0cb1e8c13f336c34011608f112 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=BD=E9=BE=99?= Date: Mon, 26 Jul 2021 19:25:38 +0800 Subject: [PATCH 2/2] chore --- packages/hooks/src/usePrevious/__tests__/index.test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/hooks/src/usePrevious/__tests__/index.test.ts b/packages/hooks/src/usePrevious/__tests__/index.test.ts index 8f8d88e791..92ef69937a 100644 --- a/packages/hooks/src/usePrevious/__tests__/index.test.ts +++ b/packages/hooks/src/usePrevious/__tests__/index.test.ts @@ -1,17 +1,17 @@ import { renderHook } from '@testing-library/react-hooks'; -import usePrevious, { compareFunction as comFunc } from '../'; +import usePrevious, { ShouldUpdateFunc } from '../'; describe('usePrevious', () => { it('should be defined', () => { expect(usePrevious).toBeDefined(); }); - function getHook(initialValue?: T, compareFunction?: comFunc) { + function getHook(initialValue?: T, compareFunction?: ShouldUpdateFunc) { return renderHook(({ val, cmp }) => usePrevious(val as T, cmp), { initialProps: { val: initialValue || 0, cmp: compareFunction, - } as { val?: T; cmp?: comFunc }, + } as { val?: T; cmp?: ShouldUpdateFunc }, }); }