useEffect

useEffect

useEffect的作用是让函数组件具有自己的生命周期钩子函数
useEffect可以看作是class组件中componentDidMount/componentDidUpdate/componentWillUnmount三个生命周期钩子函数的结合体。
useEffect可以接受两个参数，第一个参数是一个回调函数，这个函数，我们叫它effect函数，这个effect函数里面还可以返回一个函数，我们叫它清除函数，第二个参数是一个数组，表示当前useEffect的依赖项
有了 useEffect，我们就可以通过函数组件来实现更为复杂的功能。

在 react hooks 出现之前，主要用类组件来实现复杂功能，因为类组件中有生命周期。

const dependArr = []
useEffect(function effectFunc () {
  return function clearFunc () { }
}, dependArr);
//这里effectFunc就是effect函数，clearFunc就是清除函数 dependArr就是依赖项

模拟 componentDidMount

• 当useEffect的依赖项传递的是一个空数组时，它就相当于componentDidMount，即effect函数仅会在DOM初始化渲染完毕之后执行一次

  import React, { useEffect, useState } from 'react'
  export default function Hello () {
  const [msg, setMsg] = useState("");
  useEffect(() => {
   //模拟接口发送
   setTimeout(() => {
     const backendData = 'hello';//假设这是从后台拿的数据
     setMsg(backendData);//把数据同步到msg
   }, 1000);
  }, []);
  return (
   <div></div>
  )
  }

  模拟componentDidUpdate

• useEffect的依赖项如果不传递，则effect函数，会在每次界面更新（包括初始渲染后）的时候执行

• 如果依赖项传递了有限个依赖，则该函数仅仅会在这些依赖项发生变化时执行。（这种情况下useEffect就相当于 componentDidMount和componentDidUpdate的结合体）

  import React, { useState, useEffect } from 'react';
  function Hello () {
  const [count, setCount] = useState(0);
  useEffect(() => {
    //如果不传递第二个参数，则界面初始渲染后和以后每次界面更新后都会执行该回调函数
    document.title = `You clicked ${count} times`;
  });
  useEffect(()=>{
  document.title = `You clicked ${count} times`;
  },[count]);
  //如果传递了count，则useEffect只会在count发生变换时执行
  return (
    <div>
      <p>你点了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点我
      </button>
    </div>
  );
  }

  模拟componentWillUnMount

  清除函数会在组件卸载的时候，以及effect函数执行（当然effect函数首次执行除外，因为这时清除函数还没有被 返回）之前执行

  import React, { useState, useEffect } from 'react';
  function Hello () {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log("effect函数执行")
    const timer = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);
    return () => {
      console.log("清除函数执行")
      clearInterval(timer);
    }
  }, []);
  //如果依赖项传递的是空数组，则effect函数只会执行一次，并且在组件卸载的时候，清除函数会执行一次
  //如果不传，则每次count改变清除函数和effect函数都会执行,具体的执行顺序是页面刚刚渲染完毕的时候
  //effect函数会执行一次，接着每当count变化过后，先执行清除函数，在执行effect函数
  return (
    <div>{count}</div>
  )
  }