副效应、useEffect、useMemo、useCallback

截屏2022-02-22 下午7.49.02.png

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

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

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用于执行副效应，所以放在渲染后执行。

WIP: React基础——hook

副效应、useEffect、useMemo、useCallback