React - 即使不依赖父状态，子组件也会重新呈现

Question

console.log('Render test') 在我的测试组件中运行了两次。

没有使用测试状态，我只是把它放在那里作为示例。测试组件不依赖于测试状态，但它仍然呈现两次。为什么？

index.js:

import React from "react";
import ReactDOM from "react-dom";
import AppTest from "./AppTest";

ReactDOM.render(<><AppTest /></>, document.getElementById("container"));

AppTest.js:

import Test from "./Test";
import React, {useState, useEffect} from "react";

function AppTest() {
    const [tests, setTests] = useState([]);

    useEffect(() => {
        setTests(['test1', 'test2']);
    }, []);

    return (
        <>
            <Test />
        </>
    );
}

export default AppTest;

Test.js:

import React, {useEffect} from "react";

function Test() {
    useEffect(() => {
        console.log("Render Test");
    });
    return (
        <h1>Test</h1>
    );
}

export default Test;

Answer 1

您可以使用 React.memo 来防止重新渲染，除非道具发生变化 - 这有更多信息 -

Answer 2

useEffect 运行两次，因为它缺少依赖项数组。添加一个空数组表示它没有依赖关系，然后你不会看到多个日志语句：

function Test() {
    useEffect(() => {
        console.log("Render Test");
    }, []);
    // ...
}

Answer 3

由于 AppTest 组件的行为，组件 Test 被渲染了两次。 AppTest 中的 useEffect 函数使用 setTests(['test1', 'test2']); 修改组件的状态，因此 AppTest 组件为 re-rendered.

如前所述，您可以使用记忆来避免re-render测试组件：

import React, {useEffect} from "react";
const Test= React.memo(()=> {
    useEffect(() => {
        console.log("Render Test");
    });
    return (
        <h1>Test</h1>
    );
}

export default Test;

React - 即使不依赖父状态，子组件也会重新呈现

React - child component re-renders even if it doesn't rely on the parent state

reactjs

use-effect

use-state