前言
最近在使用 react hooks 重构公司系统，在使用由于 useEffect 的特性，当有多个依赖项时， 如果同时修改了多个依赖项， useEffect 会调用多次，可能会发生非预期的调用。
举个🌰
我们有如下一个界面， 要实现如下需求
- 修改状态时，拉取最新的数据。
- 修改类型时，将状态重置为：全部预约，拉取最新的数据。
image.png
我们用代码简单实现下：
import { useMemo } from 'react';
import { useEffect, useState } from 'react';
export default function Records() {
const types = useMemo(() => {
return ['个人记录', '家属记录'];
}, []);
const statusList = useMemo(() => {
return ['全部预约', '待支付', '已受理'];
}, []);
const [type, setType] = useState('个人记录');
const [status, setStatus] = useState('全部预约');
const getData = () => {
console.log(`获取最新列表，类型：${type}, 状态：${status}, ${Date.now()}`);
};
// 类型更改，重置状态
useEffect(() => {
setStatus('全部预约');
}, [type]);
// 当状态或类型更改的时候拉取最新的数据
useEffect(() => {
getData();
}, [type, status]);
return (
<div>
<div>
{types.map((val) => {
return (
<button style={{ color: val == type ? 'red' : 'black' }} key={val} onClick={() => setType(val)}>
{val}
</button>
);
})}
</div>
<div>
{statusList.map((val) => {
return (
<button style={{ color: val == status ? 'red' : 'black' }} key={val} onClick={() => setStatus(val)}>
{val}
</button>
);
})}
</div>
</div>
);
}
2.gif
从运行结果来看，两个需求都实现了， 但是有一个问题，当状态和记录类型同时更改的时候会获取两次最新的数据。
为了解决这个问题，我们有如下几种方式：
-
方式1（个人不推荐）
不使用useEffect获取最新数据，将getData调用方式放在按钮的点击事件上。
缺点：开发者需要关注的点变多，不利于后期维护。getData函数还需要增加两个形参, 代码复杂度提升
代码如下：
import { useMemo } from 'react';
import { useEffect, useState } from 'react';
export default function Records() {
const types = useMemo(() => {
return ['个人记录', '家属记录'];
}, []);
const statusList = useMemo(() => {
return ['全部预约', '待支付', '已受理'];
}, []);
const [type, setType] = useState('');
const [status, setStatus] = useState('');
const getData = (type: string, status: string) => {
setType(type);
setStatus(status);
console.log(`获取最新列表，类型：${type}, 状态：${status}, ${Date.now()}`);
};
// 第一次初始化，获取数据
useEffect(() => {
getData('个人记录', '全部预约');
}, []);
return (
<div>
<div>
{types.map((val) => {
return (
<button style={{ color: val == type ? 'red' : 'black' }} key={val} onClick={() => getData(val, '全部预约')}>
{val}
</button>
);
})}
</div>
<div>
{statusList.map((val) => {
return (
<button style={{ color: val == status ? 'red' : 'black' }} key={val} onClick={() => getData(type, val)}>
{val}
</button>
);
})}
</div>
</div>
);
}
1.gif
-
方式2 (个人不推荐)
合并type和status到一个state, 这样依赖性就变成了一个, 也不会出发两次useEffect的副作用。
缺点: 其实两个状态关联关系并不是很强, 可读性不是非常好, 调用和更新某个状态的时候还要注意另一个状态的值, 果如依赖的个数继续增加, 复杂度直线上升。
代码如下:
import { useMemo } from 'react';
import { useEffect, useState } from 'react';
export default function Records() {
const types = useMemo(() => {
return ['个人记录', '家属记录'];
}, []);
const statusList = useMemo(() => {
return ['全部预约', '待支付', '已受理'];
}, []);
const [state, setState] = useState({
type: '个人记录',
status: '全部预约',
});
const getData = () => {
console.log(`获取最新列表，类型：${state.type}, 状态：${state.status}, ${Date.now()}`);
};
// 当状态或类型更改的时候拉取最新的数据
useEffect(() => {
getData();
}, [state]);
return (
<div>
<div>
{types.map((val) => {
return (
<button style={{ color: val == state.type ? 'red' : 'black' }} key={val} onClick={() => setState({status:"全部预约", type: val})}>
{val}
</button>
);
})}
</div>
<div>
{statusList.map((val) => {
return (
<button style={{ color: val == state.status ? 'red' : 'black' }} key={val} onClick={() => setState({...state, status: val})}>
{val}
</button>
);
})}
</div>
</div>
);
}
-
方式3 (个人相对推荐)
其实我们想要实现的是, 当有多个依赖项同时更改时, 回调函数只执行最新的一次。这和防抖的思想是不是很相似, 所以我们可以先用防抖的思想处理getData函数。
由于react hooks+闭包有值捕获的特性,需要用useRef实时记录最新的回调函数,具体细节不赘述。
我们先手动实现一个防抖Hooks, 这里先借用下lodash-es的防抖实现
import { useRef } from 'react';
import { debounce } from 'lodash-es';
export function useDebounce<T extends Function>(fn: T, wait = 1000) {
const func = useRef(fn);
func.current = fn
const debounceWrapper = useRef(debounce((args) => func.current?.(args), wait));
return (debounceWrapper.current as unknown) as T;
}
全部代码:
import { useDebounce } from '@/hooks/useInit';
import { useMemo } from 'react';
import { useEffect, useState } from 'react';
export default function Records() {
const types = useMemo(() => {
return ['个人记录', '家属记录'];
}, []);
const statusList = useMemo(() => {
return ['全部预约', '待支付', '已受理'];
}, []);
const [type, setType] = useState('个人记录');
const [status, setStatus] = useState('全部预约');
const getData = useDebounce(() => {
console.log(`获取最新列表，类型：${type}, 状态：${status}, ${Date.now()}`);
}, 0);
useEffect(() => {
setStatus('全部预约');
}, [type]);
useEffect(() => {
getData();
}, [type, status]);
return (
<div>
<div>
{types.map((val) => {
return (
<button style={{ color: val == type ? 'red' : 'black' }} key={val} onClick={() => setType(val)}>
{val}
</button>
);
})}
</div>
<div>
{statusList.map((val) => {
return (
<button style={{ color: val == status ? 'red' : 'black' }} key={val} onClick={() => setStatus(val)}>
{val}
</button>
);
})}
</div>
</div>
);
}
执行结果:
3.gif
这样虽然实现了我们的需求, 但是总觉得不是非常优雅, 需要具体到某个函数, 而且修改了原函数的实现, 如果在
useEffect中做其他操作, 比较麻烦, 语义上也不直观, 其他开发者可能不明白为什么要用防抖。比如:
useEffect(() => {
getData();
//其他操作1
//其他操作2
}, [type, status]);
为了解决上面问题, 我们可以进一步封装, 实现一个useBatchEffect。
useBatchEffect代码如下:
/**
* 批量设置更新
*/
export function useBatchEffect(effect: EffectCallback, deps?: DependencyList, wait = 0) {
const fn = useDebounce(effect, wait);
useEffect(fn, deps);
}
在这里, 我们利用了刚上面实现的防抖hooks, 对useEffect中做的所有操作进行防抖, 变相实现了useEffect有多个依赖同时更改的一个批量操作的操作。
全部代码:
import { useBatchEffect } from '@/hooks/useInit';
import { useMemo } from 'react';
import { useEffect, useState } from 'react';
export default function Records() {
const types = useMemo(() => {
return ['个人记录', '家属记录'];
}, []);
const statusList = useMemo(() => {
return ['全部预约', '待支付', '已受理'];
}, []);
const [type, setType] = useState('个人记录');
const [status, setStatus] = useState('全部预约');
const getData = () => {
console.log(`获取最新列表，类型：${type}, 状态：${status}, ${Date.now()}`);
}
useEffect(() => {
setStatus('全部预约');
}, [type]);
// 批量操作
useBatchEffect(() => {
getData();
}, [type, status]);
return (
<div>
<div>
{types.map((val) => {
return (
<button style={{ color: val == type ? 'red' : 'black' }} key={val} onClick={() => setType(val)}>
{val}
</button>
);
})}
</div>
<div>
{statusList.map((val) => {
return (
<button style={{ color: val == status ? 'red' : 'black' }} key={val} onClick={() => setStatus(val)}>
{val}
</button>
);
})}
</div>
</div>
);
}
4.gif
总结
对比上面三个方案的实现, 个人比较推荐第三种方式, 相对另外两种方式来说, 代码改动最小, 语义上也比较直观。如果大家有什么更好建议, 可以在评论区提出。
