在 React with APIs 中发生了太多的重新渲染

Question

我只是 React 的初学者，正在学习如何使用 API 和 React。

我的问题是在我的代码中发生了过多的重新渲染。当我添加 console.log("test"); 行时，我才知道它。

我应该怎么做才能克服这个问题？

import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";

const Home = () => {
    const [data, setData] = React.useState([]);

    useEffect(() => {
        fetch("https://61924463aeab5c0017105ebe.mockapi.io/test")
            .then((res) => res.json())
            .then(
                (result) => {
                    if (result) {
                        console.log("test");
                        setData(result);
                    }
                },
                (error) => {
                    console.log(error);
                }
            );
    });

    return (
        <div>
            <TableContainer component={Paper}>
                <Table sx={{ minWidth: 650 }} aria-label="simple table">
                    <TableHead>
                        <TableRow>
                            <TableCell align="center">ID</TableCell>
                            <TableCell align="center">Name</TableCell>
                            <TableCell align="center">Avatar</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {data.map((row) => (
                            <TableRow
                                key={row.name}
                                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
                            >
                                <TableCell align="center">{row.id}</TableCell>
                                <TableCell align="center">{row.name}</TableCell>
                                <TableCell align="center">
                                    <img src={row.avatar} width="25" />
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
        </div>
    );
};

export default Home;

Answer 1

每次在组件内部发生渲染时，您的 useEffect 都会被执行。

您需要在 useEffect 中添加空依赖，这样它就不会被第二次执行。

useEffect(() => {
    fetch("https://61924463aeab5c0017105ebe.mockapi.io/test")
        .then((res) => res.json())
        .then(
            (result) => {
                if (result) {
                    console.log("test");
                    setData(result);
                }
            },
            (error) => {
                console.log(error);
            }
        );
}, []);

在 React with APIs 中发生了太多的重新渲染

Too much rerendering happeing in React with APIs

api

rendering

rerender

reactjs

use-effect