第二章 React之useEffect的使用
一、useEffect是什么?
useEffect()是一个钩子函数,需要一个函数作为参数这个作为参数的函数,将会在组件渲染完毕后执行。在开发中,可以将那些会产生副作用的代码编写到useEffect的回调函数中 ,这样就可以避免这些代码影响到组件的渲染。
二、使用步骤
代码如下(示例):
import React, {useEffect, useState} from 'react';
const Test = () => {
const [count, setCount] = useState(0);
useEffect(()=>{
setCount(1);
});
const clickHandler = ()=>{
console.log('点击按钮!');
setCount(1);
};
return (
<div>
{count}
<button onClick={clickHandler }>点击</button>
</div>
)
}
三、限制Effect
组件每次渲染effect都会执行,这似乎并不总那么必要。因此在useEffect()中我们可以限制effect的执行时机,在useEffect()中可以将一个数组作为第二个参数传递,像是这样:
useEffect(()=>{
/* 编写那些会产生副作用的代码 */
return () => {
/* 这个函数会在下一次effect执行前调用 */
};
}, [a, b]);
四、清除Effect
组件的每次重新渲染effect都会执行,有一些情况里,两次effect执行会互相影响。比如,在effect中设置了一个定时器,总不能每次effect执行都设置一个新的定时器,所以我们需要在一个effect执行前,清除掉前一个effect所带来的影响。要实现这个功能,可以在effect中将一个函数作为返回值返回,像是这样:
useEffect(()=>{
/* 编写那些会产生副作用的代码 */
return () => {
/* 这个函数会在下一次effect执行钱调用 */
};
});
effect返回的函数,会在下一次effect执行前调用,我们可以在这个函数中清除掉前一次effect执行所带来的影响。