1.useEffect
react hooks
使用:
useEffect(fn,dep)
第一个参数是函数,第二个参数是依赖项,可不传
1.当没有给依赖项时,则useEffect每次都会执行里面的函数
2.当给依赖项时,依赖项发生改变时,useEffect才会执行里面的函数
3.当依赖项为一个空数组时,则页面加载后只执行一次,后面不在执行
import React, { useEffect, useState } from 'react';
const App = () => {
const [count, setCount] = useState(0);
// componentDidMount
useEffect(() => {
console.log('我只执行一次');
}, []);
// update生命周期
useEffect(() => {
console.log('count变化了,我就执行');
}, [count]);
// update
useEffect(() => {
console.log('我每次都执行');
});
const clickEvent = () => {
setCount(preCount => {
console.log('上一次的值:', preCount);
return preCount + 1;
});
};
return (
<div className='App'>
<button onClick={clickEvent}>increment</button>
<p>{count}</p>
</div>
);
};
export default App;
清除副作用
在useEffect函数中返回一个函数,则当组件卸载时就会执行清除副作用函数
useEffect(() => {
console.log('我每次都执行');
// componentWillUnMount
return () => {
console.log('clean');
};
});