WIP: React基础——hook

副效应、useEffect、useMemo、useCallback

• 副效应（纯函数只能涉及数据计算，其他操作都是副效应）

  • 在函数式编程中，将只利用输入通过一系列计算得到输出的函数叫做纯函数，而如果函数中需要改变外部状态，如修改一个变量的值，那么这部分代码是函数中的副效应。
  • React hook的作用就是利用hook来为纯函数添加副效应。

• useEffect

  • useEffect是最常用的React hook，它包含有2个参数，第一个是一个effect函数，第二个参数可选，是一个数组（数组中可以填入effect函数的依赖项）。

    useEffect(() => {...
    },[...])
    

    effect中一般是包含副效应的函数。

  • 当useEffect的第二个参数不选的时候，useEffect中的effect函数的执行逻辑

    useEffect(() => {...
    })
    

    这时，当页面每一次重新渲染，effect函数都会执行一次。

  • 当useEffect的第二个参数不为空数组（注意当有多个副效应，那么就用多个useEffect）

    useEffect(() => {...
    },[a])
    

    这时，当变量a改变时，effect函数才会执行。

  • 当useEffect的第二个参数是空数组的时候

    useEffect(() => {...
    },[])
    

    这时，useEffect的effect函数只会执行一次（在页面渲染完成执行）。

• useCallback

  • useCallback也是hook中较为常用的，它的语法形式与执行逻辑类似于useEffect，但是作用类似于useState。

    const fetchData = useCallback(() => {...
    }, []);
    

  • useCallback的第一个参数是我们之后要使用的函数（大概率是后面代码中useEffect中的依赖项），第二个参数是一个数组。

    • 在上面的代码中，useCallback会将第一个参数赋给fetchData保存起来。

  • useCallback的执行逻辑和useEffect类似

    • useCallback的执行逻辑取决于第二个可选参数。
    • 当没有传第二个参数的时候，useCallback会在每次页面渲染后执行。
    • 当传入的第二个参数是非空数组的时候，useCallback会在依赖项发生变化的时候执行。
    • 当传入的第二个参数是一个空数组的时候，useCallback只会执行一次。

  • useCallback什么时候使用，解决了什么问题

    • 当我们需要在代码中加入useEffect并且依赖项是某个函数的时候，我们可以使用useCallback将这个函数固定下来。（useCallback更常见于将某个函数作为回调传给子组件）。

      function App(){const [val, setVal] = useState(0);function getData() {setTimeout(() => {setVal(val + 1)},500)}useEffect(() => {getData();},[getData])return {<h1>{val}</h1>}
      }
      

      上面这种写法会造成下列死循环

      1.组件App渲染时，生成getData函数，由于useEffect中对getData有依赖，因此会执行useEffect第一个参数中的effect函数。

      2.effect函数调用getData函数，getData函数中调用了setVal，修改了val，触发组件App重新渲染。

      3.App重新渲染时生成了新的getData方法

      4.useEffect发现getData引用发生改变，因此再次执行effect函数。

      function App(){const [val, setVal] = useState(0);function getData() {const getData = useCallback(() => {setTimeout(() => {setVal(val + 1)},500)},[])useEffect(() => {getData();},[getData])return {<h1>{val}</h1>}
      }
      

      使用useCallback来将需要作为依赖项的函数getData赋给变量getData保存，这样就不会触发死循环。

• useMemo（主要用来提升性能，当依赖项不变化时，不会重新计算）

  • 写在之前

    • 其实useMemo应该写在useCallback之前，毕竟useCallback实际上是useMemo的一种特殊情况，当useMemo要保存的value是函数的时候，那么实际上就是useCallback，但是因为函数写在useMemo中看上去很奇怪，所以使用了useCallback。

  • useMemo包含2个参数，第一个参数是一个函数，第二个参数是依赖项数组。

    const val = useMemo(() => {...return value
    },[])
    

  • useMemo实际上类似于Vue的Option API中的computed，给定函数和依赖项，当依赖项不发生改变的时候，函数不会重新计算。同时变量中保存的值是函数的return。

  • useMemo是不能传参数的。

  • useMemo和useEffect的区别

    • 因为useMemo实际上是计算属性，就必然在渲染前执行，而useEffect用于执行副效应，所以放在渲染后执行。