zoukankan      html  css  js  c++  java
  • react hook 使用注意点

    1.useEffect

      useEffect执行环境:

    // componentDidMount
    useEffect(() => {
        // do something    
    }, [])
    
    // componentUpdate  count变量更新时执行
    useEffect(() => {
        // do something
    }, [count])
    
    // componentWillUnmount
    useEffect(() => {
         console.log('进入');
         return () => {
           console.log('离开'); 
         }
    },[])

    2. 当在useEffect 使用 变量或者函数,并且没有添加依赖时, 会报如下错误  

      错误:React Hook useEffect has missing dependencies: 'fn1' and 'menuList'. Either include them or remove the dependency array
      const fn1 = (list) => { let hashMap = new Map(); fn2(list, hashMap); return hashMap.get(location.pathname); } const fn2 = (list, map) => { list.forEach(item => { map.set(item.path, item.id) if(item.children && item.children.length > 0){ mapList(item.children, map); } }); } useEffect(() => { fn1(menuList); },[])

    变量的话直接添加到以来的数组里即可,函数的话添加到依赖数组后会报这个警告

    The 'fn1' function makes the dependencies of useEffect Hook (at line 208) change on every render. Move it inside the useEffect callback. Alternatively, wrap the 'fn1' definition into its own useCallback() Hook;

    解决办法: 使用useCallback

    注意:
      1. 使用useCallback时,函数中使用到的变量也需要添加到依赖的数组中
      2. 使用useCallback时,函数中调用另外一个函数时,需在当前函数前声明

      const fn2 = useCallback((list, map) => { list.forEach(item => { map.set(item.path, item.id) if(item.children && item.children.length > 0){ mapList(item.children, map); } }); },[])
    const fn1
    = useCallback((list) => { let hashMap = new Map(); mapList(list, hashMap); return hashMap.get(location.pathname); },[location, mapList])
    useEffect(()
    => { let path = findNowPath(menuList).toString(); setSelectedKeys([path]) },[menuList, findNowPath])

      

  • 相关阅读:
    C++中的空类,编译器默认可以产生哪些成员函数
    野指针(Wild pointer)和悬垂指针(dangling pointer)
    WHY C++ ?(by Herb Sutter) & C++17 standard
    mapreduce 多路输出
    stdout 编码 vim 删除左边,右边
    积累碎片shell
    python logging模块
    shell 流程控制
    shell 变量
    时间管理法则
  • 原文地址:https://www.cnblogs.com/Mr-Rshare/p/13564153.html
Copyright © 2011-2022 走看看