npm install --save use-deep-compare-effect Usage You use it in place ofReact.useEffect. NOTE: Only use this if your values are objects or arrays that contain objects. Otherwise, you should just useReact.useEffec
在更新State为相同数据后,组件因为其他State/Props进行re-render时,useDeepCompareEffect会一直进行深度对比,导致严重的性能问题(因为真实数据层级较多)。 DEMO: https://codesandbox.io/p/sandbox/use-deep-compare-effect-t9f984?file=%2Fsrc%2FApp.tsx%3A31%2C5 复现步骤: 1、初始化页面 2、重新设置data为相同...
意思是由于ref不能引起渲染,所以useEffect不能监听它。 那么一些use-deep-compare-effect下面这样的写法,没问题吗? import { useRef, useEffect } from 'react'; import _ from 'lodash'; export function useDeepCompareEffect<T>(fn, deps: T) { // 使用一个数字信号控制是否渲染,简化 react 的计算,也便于...
npm install --save use-deep-compare-effect Usage You use it in place ofReact.useEffect. NOTE: Only use this if your values are objects or arrays that contain objects. Otherwise, you should just useReact.useEffect. In case of "polymorphic" values (eg: sometimes object, sometimes a boolean)...
Reference useDeepCompareEffect(effect:()=>void|(() =>void|undefined),deps:any[]);
==Object(val)exportdefaultfunctionuseDeepCompareEffect(effect:EffectCallback,deps:any[]){if(!deps||!deps.length){console.warn("deps 里面不能没有数据")}if(deps.every(isPrimitive)){console.warn('原始类型的值,使用useEffect来替代吧')}// 前面不能有return。constref=useRef<DependencyList|undefined>...
在使用useDeepCompareEffect时,依赖了一个对象,当对象变更时会将对象赋值给Form组件,当表单项更改会使得传入对象被修改,此时useDeepCompareEffect的data并没有改变,但useDeepCompareEffect会判断依赖变了,执行副作用,导致表单编辑内容丢失。 原因:useDeepCompareEffect存储依赖时是进行的浅拷贝,获取依赖对Form组件赋值时没...
🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality - Issues · kentcdodds/use-deep-compare-effect
import {useCounter, useDeepCompareEffect} from 'react-use';const Demo = () => { const [count, {inc: inc}] = useCounter(0); const options = { step: 2 };useDeepCompareEffect(() => { inc(options.step) }, [options]);return ( ...
I have "borrowed" dev warnings fromhttps://github.com/kentcdodds/use-deep-compare-effect/blob/master/src/index.js. I wasn't sure if I had to useprocess.env.NODE_ENV !== 'production'orprocess.env.NODE_ENV === 'development'since I see both styles in this codebase....