useEffect副作用

useEffect副作用

定义：

useEffect也叫副作用，可以接收两个参数，参数一接受一个回调函数，参数二接受一个数组。

作用：

useEffect的作用是模拟组件生命周期函数。

使用：

当参数二中的数组里的数据发生改变的时候，参数一中的回调函数会重新执行。

示例一：
如果参数二为空数组，那么只有在组件初始化的时候执行一次。

const { useState, useEffect } = React
function Counter() {
	const [count, setCount] = useState(0)
	useEffect(() => {
		console.log('参数二数组为空')
	}, [])
	return (
	<div>
    	<h2>我是一个组件</h2>
   		<button onClick={()=> setCount(count + 1)}>{count}</button>
	</div>
)}
const App = () => {
	return (
		<Counter />
	)}
ReactDOM.render(
<App />, document.getElementById('app'))

示例二：
如果不传递参数二数组，那么每次组件的更新都会执行参数一中的回调函数。

function Counter() {
	const [count, setCount] = useState(0)
	useEffect(()=>{
		console.log('不传参数二')
	})
	return (
	<div>
    	<h2>我是一个组件</h2>
    	<button onClick={()=> setCount(count + 1)}>{count}</button>
	</div>
	)
}

示例三：

参数一中的回调函数如果返回一个function，那么这个function在组件销毁的时候执行。

function Counter() {
	const [count, setCount] = useState(0)
	useEffect(()=>{
		return ()=>{
			console.log('参数一返回一个function');
		}
	},[count])
	return (
	<div>
    	<h2>我是一个组件</h2>
    	<button onClick={()=> setCount(count + 1)}>{count}</button>
	</div>
	)
}

运行效果：