useEffect为函数组件添加“副作用”

最近在学习React，用了Hooks了，Hooks虽然好用，但是对于刚上手Hooks的小伙伴来说，可能不太理解useEffec和类组件中生命周期方法之间的关系，所以决定总结一下。如有不对，请多多指正！

什么是副作用

副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）

常见的副作用

1. 数据请求 ajax发送
2. 手动修改dom
3. localstorage操作

useEffect函数的作用就是为react函数组件提供副作用处理的！

使用步骤

1. 导入 useEffect 函数
2. 调用 useEffect 函数，并传入回调函数
3. 在回调函数中编写副作用处理（dom操作）
4. 修改数据状态
5. 检测副作用是否生效

讲述概念优点不好理解，直接上代码

父组件

import React, { useState } from "react";
import Child from "./components/Child";

export default function App() {
  //是否显示子组件
  let [isShow, setShow] = useState(false);
  return (
    <div style={{ backgroundColor: "#cfc" }}>
      <h1>父组件(APP)</h1>
      <button onClick={() => setShow(!isShow)}>挂载/卸载子组件</button>
      {isShow && <Child />}
    </div>
  );
}

子组件

import React, { useEffect, useState } from "react";

export default function Child() {
  //状态变量
  let [count, setCount] = useState(0);
  let [age, setAge] = useState(18);
  
  //1.组件挂载/数据更新的生命周期方法
  useEffect(function () {
    console.log("1-生命周期--组件挂载/更新时调用");
    //约等价于  componentDidMount +  componentDidUpdate
  });
  
  //2.组件挂载/特定数据更新时的生命周期方法
  useEffect(
    function () {
      console.log("2-生命周期--组件挂载/特定数据更新时调用");
    },
    [age]
  );
  
  //3.组件挂载时的生命周期方法
  useEffect(function () {
    console.log("3-生命周期--组件挂载时调用");
    //约等价于  componentDidMount
    //只会在组件挂载时触发
  }, []);
  
  //4.组件更新/卸载时的生命周期方法
  useEffect(function () {
    return function () {
      console.log("4-生命周期--组件更新/卸载时调用");
      //等价于  componentDidMount  +  componentWillUnmount
      //任何状态更新时+卸载时都会触发
    };
  });
  
  //5.组件卸载时的生命周期方法
  useEffect(function () {
    return function () {
      console.log("5-生命周期--组件卸载时调用");
      //等价于   componentWillUnmount
      //只会在组件卸载时触发
    };
  }, []);

  return (
    <div style={{ backgroundColor: "#ccf", margin: "30px", padding: "30px " }}>
      <h1>子组件(Child)</h1>
      <button onClick={() => setCount(count + 1)}>当前点击次数:{count}</button>
      <button onClick={() => setAge(age + 1)}>年龄:{age}</button>
    </div>
  );
}