React常用hook的优化useEffect浅比较
Posted wanqingying
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React常用hook的优化useEffect浅比较相关的知识,希望对你有一定的参考价值。
先说说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<T>(fn, deps: T) { // 使用一个数字信号控制是否渲染,简化 react 的计算,也便于调试 let renderRef = useRef<number | any>(0); let depsRef = useRef<T>(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);
以上是关于React常用hook的优化useEffect浅比较的主要内容,如果未能解决你的问题,请参考以下文章
UseEffect - React Hook useEffect 缺少依赖项:
hook函数之useEffect的使用——自定义hook函数网络请求——
有条件地调用 React Hook “useEffect”。在每个组件渲染中,必须以完全相同的顺序调用 React Hooks