不建议在useEffect中进行数据获取的理由

不建议在useEffect中进行数据获取的理由

理由1. 假设A搜索条件 响应时间 长于B搜索条件 则 快速切换搜索条件时 存在接口竞态问题!

• 解决方法: 使用 清理函数 一个布尔值来判断

import styles from './index.less';
import { useEffect, useState } from 'react';
import { Button } from 'antd';
const HomePage: React.FC = () => {const [c, setC] = useState(1);useEffect(() => {console.log('1', c);// step1return () => {// 从第二次触发这个useEffect是都会调用这个函数.// 打印的值是上次的值//console.log('2', c); // click Button step2}}, [c]);// 初始化执行 useEffect 打印 1 1 不执行return// 点击 按钮 打印 2 1 再打印 1 2// 再点击按钮 打印 2 2 再打印 1 3return (<div className={styles.container}><Button onClick={() => setC(Number(c) + 1)}>addC</Button></div>);
};export default HomePage;

理由2. 严格模式下, 开发环境中 useEffect 总是会运行两次 导致调用了2次接口

解决方法 使用自定义hooks 或者React Query等库