ReactHooks——useEffect使用方法

当在Hooks中我们需要释放掉或者在销毁时候做一些事情

useEffect里面的return是相当于一个componentWillUnmount

  useEffect(() => {
    const id = setInterval(() => {
      changeNum((c) => c + 1);
    }, 1000);
    //下面的return解绑
    return () => clearInterval(id);
  }, [num, dataList]);

当第二个参数为空数组

相当于是执行了一个componentDidMount生命周期 在这里可以执行一些页面刚加载的事件或者请求

  useEffect(()=>{
    console.log(dataList);
  },[])

当第二个参数为一个时

在num进行改变时触发 相当于执行componentDidUpdate

 const [num, changeNum] = useState(0); //定义一个num 初始值为0 修改方法为changeNum
 useEffect(() => {
    console.log(dataList);
  }, [num]);

当第二个参数为两个或者多个时

当其中两个或者多个参数中的某一个发生变化都会触发

 const [num, changeNum] = useState(0); //定义一个num 初始值为0 修改方法为changeNum
  const [dataList, getDataList] = useState<any>({
    data: [
      //定义一个数组进行循环
      {
        id: 1,
        name: "lili",
        likecolor: "yellow",
      },
      {
        id: 2,
        name: "pipi",
        likecolor: "red",
      },
    ],
  });
  useEffect(() => {
    console.log(dataList);
  }, [num,dataList]);

全部代码

/* eslint-disable */
import React, { useEffect, useState } from "react";
const Home = () => {
  const [num, changeNum] = useState(0); //定义一个num 初始值为0 修改方法为changeNum
  const [dataList, getDataList] = useState<any>({
    data: [
      //定义一个数组进行循环
      {
        id: 1,
        name: "lili",
        likecolor: "yellow",
      },
      {
        id: 2,
        name: "pipi",
        likecolor: "red",
      },
    ],
  });
  useEffect(() => {
    const timer = setInterval(() => {
      changeNum((num) => num + 1);
    }, 1000);
    //下面的return解绑
    return () => clearInterval(timer);
  }, [num, dataList]);
  return (
    <div>
      <div onClick={() => changeNum((num) => num + 1)}>{num}</div>
      {dataList?.data.map((item: any) => (
        <div
          key={item.id}
          style={{ color: item.likecolor }}
          onClick={() => getDataList({ data: [] })}
        >
          {item.id}:{item.name}
        </div>
      ))}
    </div>
  );
};
export default Home;