课程名称：2022升级 React18+TS高仿AntD从零到一打造组件库
课程章节： 第3章 神奇的 React 配合 typescript，完美输出
主讲老师：张轩
课程内容：
今天学习的内容包括：
3-7 useEffect 第一部分 - 初出茅庐
3-8 useEffect 第二部分 - 有始有终
3-9 useEffect 第三部分 - 控制运行
课程收获：
Effect Hook使用:
传入函数，函数内容告诉react组件在渲染之后需要执行哪些操作。react会保存传递的这个函数。我们称这个里面的内容叫Effect。
useState 改变函数内state状态
useEffect 函数： 接受第一个参数 函数
useEffect( ()=>{
// 在每次渲染后执行，组件渲染
document.title = ·点击${count}次·
} )
需要清除的effect （比如，事件监听）
useEffect 函数可以返回函数，则可以在返回函数中，进行清楚的操作，比如事件移除
useEffect() 第二个参数，数组
useEffect( ()=>{
document.title = ·点击${count}次·
document.addEventListener('click', callback)
return ()=>{
document.removeEventListener('click')
}
}, [] ) // 第二个参数，传入空数组，可以使effect不依赖传入值； 传入数组有参数，则只有依赖的参数发生改变，useEffect才会运行渲染
useEffect使用时有以下情况
1、不传递
useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在。
useEffect(()=>{
console.log(props.number)
setNumber(props.number)
}) //所有更新都执行
2、传递空数组
useEffect(()=>{
console.log(props)
},[]) //仅在挂载和卸载的时候执行
3、传递一个值
useEffect(()=>{
console.log(count)
},[count]) //count更新时执行
4、传递多个
const Asynchronous : React.FC=({number})=>{
const [number2,setNumber2] = useState(number);
useEffect(()=>{
console.log(number)
setNumber2(number)
},[number,setNumber2]) //监听props对象number的更改
//setNumber2是useState返回的setter，所以不会在每次渲染时重新创建它，因此effect只会运行一次
}
5、传递props的对象 传递的useState返回的setter
6、return 方法
const timer = setInterval(() => {
setCount(count + 1)
}, 1000)
// useEffect方法的第一个参数是一个函数，函数可以return一个方法，这个方法就是在组件销毁的时候会被调用
useEffect(() => {
return () => {
clearInterval(timer)
}
}, [])