1. useRef介绍

useEffect是一个特殊的hook，我们在创建React应用中，useEffect是必不可少的,但是在官方的解释中，推荐尽量少用useEffect，只有 将组件与外部系统同步，才需要，而实际开发中，通过接口获取数据，拿到浏览器相关API，或者是控制非React组件，都会用到，useEffect的英文含义叫做 副作用，也可以称为副作用事件,当页面渲染完成，将会执行useEffect

2.何时使用useRef

1.连接外部系统： 网络请求，浏览器API，第三方库

2.读取最新的state和props

3.自定义hook

3.使用方法

useEffect接受两个参数，分别为回调函数和依赖项：

1.回调函数：操作内容

2.依赖项：依赖项变化，调用回调函数中的内容

 import { useEffect } from "react";
    function App() {
      useEffect(() => {
      console.log('react')  //初始化打印出 react
      }, []);               //依赖项为空，只调用一次
      return <div></div>;
    }

export default App;
------------------------------------------------
import { useEffect } from "react";
    function App(props) {
       const { data } = props;
          useEffect(() => {
            console.log("react");//初始化打印出 react
          }, [data]);            //依赖项为data，每次data改变，都会打印 react
          return <div></div>;
    }

export default App;

------------------------------------------------
import { useEffect } from "react";
    function App(props) {
       const { data } = props;
          useEffect(() => {
            console.log("react");             //初始化打印出 react
             return () => {                   //回调函数return一个回调函数，每次执行或组件卸载调用
              console.log("卸载");            //一般用作卸载监控，定时器，初始化数据等
            };
          }, [data]);                         //依赖项为data，每次data改变，都会打印 react
          return <div></div>;
    }

export default App;

4.总结

如何理解useEffect?useEffect像是React整合了生命周期的概念，初始化时调用，卸载时return，需要更新时添加依赖项，依赖项改变，则执行更新。需要注意的一点是，避免在依赖项添加state属性时，更新state，否则会出现循环 loop的问题