react函数式组件的useEffect

useEffect

1.useEffect的介绍

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

2.基本使用

2-1.基本使用

useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在。

useEffect(()=>{undefined
	console.log(props.number)
	setNumber(props.number)
}) //所有更新都执行
1
2
3
4

2-2 传递空数组

当第二个参数为空数组时，仅在挂载与卸载时触发

useEffect(()=>{undefined
	console.log(props)
},[]) //仅在挂载和卸载的时候执行
1
2
3

2-3 传递一个值

当参数为一个值，类似于Vue中的监听器，当该值发生变化时（底层使用Object.is()进行判断），才会调用useEffect函数

useEffect(()=>{undefined
	console.log(count)
},[count]) //count更新时执行
1
2
3

2-4 传递多个值

useState返回的setter 不会在每次渲染时重新创建，因此只会运行一次

const Asynchronous : React.FC=({number})=>{undefined
const [number2,setNumber2] = useState(number);
useEffect(()=>{undefined
	console.log(number)
	setNumber2(number)
},[number,setNumber2]) //监听props对象number的更改
//setNumber2是useState返回的setter，所以不会在每次渲染时重新创建它，因此effect只会运行一次
}
1
2
3
4
5
6
7
8

2-5 传递props的对象 传递的useState返回的setter

2-6 return

return中的函数 会在组件销毁时被调用 相当于componentWillUnMount

类似Vue中的onDestroy

const timer = setInterval(() => {undefined
setCount(count + 1)
}, 1000)
// useEffect方法的第一个参数是一个函数，函数可以return一个方法，这个方法就是在组件销毁的时候会被调用
useEffect(() => {undefined
	return () => {undefined
	clearInterval(timer)
	}
}, [])
1
2
3
4
5
6
7
8
9