六、useEffect

问题：由于setState会修改state的值，从而引起组件重新渲染，但如果直接把setState写到组件里面，会引起渲染次数过多的bug

import react,{useState} from "react"
const App=()=>{
	const [counter,setCounter]=useState(1);
	setState(2);
	return (
		<div>11111</div>
	)
}
export default App;

bug解释：电脑从App()开始解析，遇到setState(2)，会触发App重新渲染，当再遇到setState(2)，于是又开始重新渲染

解决办法：

import {useEffect} from "react";

useEffect()需要一个函数作为参数，和一个依赖数组，数组里面是手影响的所以元素

useEffect(()=>{
	//编写那些会产生副作用的代码
},[]);

useEffect()中的回调函数会在组件每次渲染完毕之后执行，这也是它和写在函数体中代码的最大的不同，函数体中的代码会在组件渲染前执行，而useEffect()中的代码是在组件渲染后才执行，这就避免了代码的执行影响到组件渲染。

import {useEffect} from "react"
useEffect(()=>{
	const timer=setTimeout(()=>{
		props.onFilter(keyword)
	},1000)

	return ()=>{
		clearTimeout(timer)
	}
},[keyword])

1、组件渲染成功后，执行useEffect，先创建timer定时器，再执行return的claerTimeout 2、当keyword发生变化时，就会执行useEffect，这样子每次执行都会清除上一个留下来的timer，再去创建一个新timer，而新timer里的过滤操作要一秒后执行 3、只要输入keyword的间隔不超过一秒，就会不断执行清除定时器创建定时器的操作，而不会执行定时器的过滤操作

六、useEffect ​

六、useEffect