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])

      

  • 相关阅读:
    主流的Nosql数据库的对比
    CCF考试真题题解
    排序
    2017-10-03-afternoon
    POJ——T 2728 Desert King
    51Nod——T 1686 第K大区间
    POJ——T 2976 Dropping tests
    2017-10-02-afternoon
    入参是小数的String,返回小数乘以100的String
    银联支付踩过的坑
  • 原文地址:https://www.cnblogs.com/Mr-Rshare/p/13564153.html
Copyright © 2011-2022 走看看