React useEffect副作用函数

第二章 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执行所带来的影响。