useEffect
1.useEffect的介绍
- 引用官网的一句话就是：useEffect 就是一个 Effect
Hook，给函数组件增加了操作副作用的能力。（你之前可能已经在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”。） 可以在组件内多次调用- React 会在
每次渲染后调用副作用函数 —— 包括第一次渲染的时候。 - 副作用函数还可以通过返回一个函数来指定如何
“清除”副作用。 - React 会在组件卸载的时候执行清除操作。
- 它的第二个参数为数组：仅在数组（定义的第二个参数）里面各项有一项发生变化的情况才会触发当前的 userEffect ，否则不触发。
2.基本使用
2-1.基本使用
useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在。
useEffect(()=>{undefinedconsole.log(props.number)setNumber(props.number)
}) //所有更新都执行
2-2 传递空数组
当第二个参数为空数组时，仅在挂载与卸载时触发
useEffect(()=>{undefinedconsole.log(props)
},[]) //仅在挂载和卸载的时候执行
2-3 传递一个值
当参数为一个值，类比于Vue中的监听器，当该值发生变化时，才会调用useEffect函数
useEffect(()=>{undefinedconsole.log(count)
},[count]) //count更新时执行
2-4 传递多个值
useState返回的setter 不会在每次渲染时重新创建，因此只会运行一次
const Asynchronous : React.FC=({number})=>{undefined
const [number2,setNumber2] = useState(number);
useEffect(()=>{undefinedconsole.log(number)setNumber2(number)
},[number,setNumber2]) //监听props对象number的更改
//setNumber2是useState返回的setter，所以不会在每次渲染时重新创建它，因此effect只会运行一次
}
2-5 传递props的对象 传递的useState返回的setter
2-6 return
return中的函数 会在组件销毁时被调用 相当于componentWillUnMount
类似Vue中的onDestroy
const timer = setInterval(() => {undefined
setCount(count + 1)
}, 1000)
// useEffect方法的第一个参数是一个函数，函数可以return一个方法，这个方法就是在组件销毁的时候会被调用
useEffect(() => {undefinedreturn () => {undefinedclearInterval(timer)}
}, [])
