useEffect 基础介绍及使用

1.useEffect的介绍

1. 引用官网的一句话就是：useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。（你之前可能已经在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”。）
2. 可以在组件内多次调用
3. React 会在每次渲染后调用副作用函数 —— 包括第一次渲染的时候。
4. 副作用函数还可以通过返回一个函数来指定如何“清除”副作用。
5. React 会在组件卸载的时候执行清除操作（清除操作：也就是useEffect第一个参数的返回函数；介绍的第四点）。
6. 它的第二个参数为数组：仅在数组（定义的第二个参数）里面各项有一项发生变化的情况才会触发当前的 userEffect ，否则不触发；

2.useEffect的使用

1. 正常使用

import React, { useState, useEffect } from 'react';
const app = (props: any) => {
  useEffect(() => {
    // 你的操作
  }, []);
}
export default app

2. 清除操作（在进入页面则开启 timer 定时器，离开页面则清除定时器）

import React, { useState, useEffect } from 'react';
const app = (props: any) => {
  useEffect(() => {
   const timer = setInterval(() => { console.log(1) }, 1000);
   // 返回的函数是当前页面离开前触发 （可以理解为销毁前触发）
   return () => {
		clearInterval(timer)
	}
  }, []);
}
export default app

3. 第二个参数：监听 numb 变化了则触发当前这个 useEffect

import React, { useState, useEffect } from 'react';
const app = (props: any) => {
  useEffect(() => {
  	console.log(numb)
  }, [numb]);
}
export default app

4. 当使用 useEffect 出现无限刷新界面的时候，请把第二个参数给定一个空数组
   出现无限刷新的原因就是在 useEffect 中修改了 useEffect 监听的值

import React, { useState, useEffect } from 'react';
const app = (props: any) => {
  useEffect(() => {
  	// 你的操作...
  }, []);
}
export default app

本文介绍参考官网提取而成<点击去官网看看>