问答

useEffect监听ref报警告和use-deep-compare-effect的实现?

作者:admin 2021-05-12 我要评论

const changedRef = useRefnumber(0);useEffect(() = { console.log('changedRef', changed);}, [changedRef.current]) 这个时候会报 Mutable values like 'chan...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
const changedRef = useRef<number>(0);

useEffect(() => {
 console.log('<<<<<changedRef>>>>>>', changed);
}, [changedRef.current])

这个时候会报

Mutable values like 'changedRef.current' aren't valid dependencies because mutating them doesn't re-render the component 

意思是由于ref不能引起渲染,所以useEffect不能监听它。

那么一些use-deep-compare-effect下面这样的写法,没问题吗?

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]);
}
###
  1. 在eslint看来是有问题的
    上述的源码链接能发下?
    我理解eslint应该会waring的,除非源码里添加了//eslint-disable-next-line react-hooks/exhaustive-deps
  2. useDeepCompareEffect功能实现上有个疑问,如下:

    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; // 应该只有发生变化时才更新`depsRef.current`吧?
      }
    -  depsRef.current = deps;
      return useEffect(fn, [renderRef.current]);
    }
  3. renderRef.current为啥不能作为依赖项?
    因为只有在执行渲染函数的时候才会计算依赖项表达式的值是否发生变化。依赖项的值发生变化想要执行useEffect的回调函数的前提条件是依赖项的值变化得能触发re-render

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • useEffect监听ref报警告和use-deep-com

    useEffect监听ref报警告和use-deep-com

  • java继承的问题

    java继承的问题

  • java 程序报错未知原因

    java 程序报错未知原因

  • CObobox能中英文切换 绑定不了xaml资源

    CObobox能中英文切换 绑定不了xaml资源

腾讯云代理商
海外云服务器