先说说react原版的useEffect使用起来不便的地方
useEffect( function() {// effect操作 },
['a', 'b', { name: 'c' }]
);这里的effect每次更新都会执行，因为第三个参数一直是不等的，{name: 'c'} !== {name: 'c'}
第二是在deps依赖很多的时候是真的麻烦
下面贴出改进版useEffect
import { useRef, useEffect } from 'react';
import _ from 'lodash';
export function useDeepCompareEffect(fn, deps: T) { // 使用一个数字信号控制是否渲染，简化 react 的计算，也便于调试
let renderRef = useRef(0);
let depsRef = useRef(deps); if (!_.isEqual(deps, depsRef.current)) {
renderRef.current++;
}
depsRef.current = deps; return useEffect(fn, [renderRef.current]);
}在使用的时候什么都不用做，只需要把参数传进来就行。
避免了之前的浅比较的缺陷，性能上有降低
deps稍微控制一下量，此处的性能不是大问题
写起来爽就完事了，要啥自行车。
useDeepCompareEffect(function() { // effect操作}, 'a');
useDeepCompareEffect( function() {// effect操作 },
{ name: 'c' }
);
useDeepCompareEffect(function() { // effect操作}, 4567);
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
