现在React多用hook开发，已经很少用class component的方式来做了，useEffect() 这个函数就可以代表我们以前使用的生命周期函数
useEffect() => 你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
**componentDidMount** 组件挂载
**componentDidUpdate** 组件更新
**componentWillUnmount** 组件将要摧毁
当useEffect没有第二个参数时 => 组件的初始化和更新都会执行，第二个参数可以不传，不会报错
useEffect(() => {
console.log("组件的初始化和更新都会执行")
})
当useEffect第二个参数为空数组时 => 初始化调用一次之后不再执行，相当于componentDidMount
useEffect(() => {
console.log("初始化调用一次之后不再执行，相当于componentDidMount")
}, [])
当useEffect第二个参数为数组并且Arrary有值得时候 => 该值有变化就执行, 相当于componentDidUpdate ,React 将对前一次渲染的count和后一次渲染的count进行比较。若相等React 会跳过这个 effect，
const [a, setA] = useState(1)
const [b, setB] = useState(2)
useEffect(() => {
console.log("初始化调用一次之后不再执行，相当于componentDidMount")
}, [a, b])
传入第二个参数，只有一个值，该值有变化就执行，
传入第二个参数，有多个值的数组，会比较每一个值，有一个不相等就执行
useEffect第二个参数不能是引用类型, 不然页面会死循环 结论： 参数不能为引用类型！！用基本类型<Number, string>,或者用useState()里的值
是因为在JavaScript中，{} === {} 结果是false，{a:1} === {a:1} 也是false
由此造成了react以为两个值不同，就一直的渲染最终页面死循环。
useEffect第一个参数可以返回一个回调函数，这个回调函数将会在组件被摧毁之前和再一次触发更新时，将之前的副作用清除掉。这就相当于 => componentWillUnmount useEffect去除副作用。我们可能会在组件即将被挂载的时候创建一些订阅，在组件被摧毁之前，或者依赖数组的元素更新后，应该将这些订阅也给摧毁掉
比如：定时器得销毁
const [a, setA] = useState(1)
useEffect(() => {
const val = setInterval(()=>{setA(a+1)}, 1000)
return () => {
clearInterval(val)
}
}, []} // [count],数组也可以有依赖，依赖数组的元素一旦有变化，触发更新时，会先走return那个方法，
然后再执行所要触发更新的东西
比如 ：
useEffect(()=>{
consol.log("0000000") // 一进入页面先打印出 000000
return ()=>{
console.log("1111111") // 跳转页面组件销毁时，页面打印出1111111
}
})
结语
前端react QQ群：
788023830----React/Redux - 地下老英雄前端交流 QQ群：
249620372----FRONT-END-JS前端（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习
