React Hook 之封装 useArray 自定义 hook

在对数组操作时,我们经常要执行新增或删除数组元素的操作,将一些常用的数组操作封装成 React 自定义 hook 使用会非常方便。下面将封装一个自定义的 useArray React hook,实现数组的取值、设置值、添加、删除和清理数组的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
* use-array.tsx
*/

import React, { useState } from "react";

/**
* 封装 useArray 自定义 React hook
* @param {Array} initialArray 要处理的数组
* @returns {Array} Object.value 处理过后的数组元素
* @returns {Function} Object.setValue 更新数组的方法,该方法是 `useState()` 方法返回的用于更新 state 的函数
* @returns {Function} Object.add 向数组末尾添加元素的方法
* @returns {Function} Object.clear 该方法会将传入的数组清空
* @returns {Function} Object.removeIndex 该方法会将指定的数组元素从数组中移除
*/
export const useArray = (initialArray) => {
const [value, setValue] = useState(initialArray);
return {
value,
setValue,
add: (item) => setValue([...value, item]),
clear: () => setValue([]),
removeIndex: (index) => {
const copy = [...value];
copy.splice(index, 1);
setValue(copy);
},
};
};

上面封装的自定义 hook useArray 将返回一系列对处理数组有用的方法和值:

  • value:处理过后的数组元素。
  • setValue:该方法是 useState() 方法返回的用于更新数组的方法。
  • add:该方法接受一个任意值,允许用户向数组末尾添加一个新元素。
  • clear:该方法会把传入的数组中的元素清空。
  • removeIndex:该方法接受一个数组元素的下标,会将数组中对应该下标的元素从数组中移除。

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from "react";
import useArray from "use-array";

const UserList = () => {
// { value, setValue, add, clear, removeIndex } = useArray(initialArray);
const { value, add } = useArray([
{ id: 1, name: "Olive" },
{ id: 2, name: "Jack" },
]);
add({ id: 3, name: "Amy" });

return <ul>{value ? <li key={value.id}>{value.name}</li> : null}</ul>;
};

export default UserList;

之后,根据业务场景可随时向 useArray 自定义 hook 中添加额外逻辑。一处添加,到处使用。