Question

我想初始化一个组件，但是它一直保持渲染状态。

根据the documentation，我使用React.memo，但这不会阻止组件重新呈现：console.log（“ re-render”）打印多次。无论树上方发生什么情况，如何使该组件完全静态？

const Canvas = React.memo((props) => {
    const context = useContext(Context);
    const width = "500%";
    const height = "500%";

    const count = useRef(0);

    useEffect(() => {
        context.initCanvas("c");
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []); //runs only once on mount

    console.log("re-render"); //outputs all the time when I cange something above in the tree.

    return (
        <>
            <canvas
                style={{border: "1px dashed black", margin: "10px"}}
                id="c"
                width={width}
                height={height}
            >
            </canvas>
        </>
    );
});

Answer 1

摘自文档：

即使祖先使用React.memo或shouldComponentUpdate，仍然会使用useContext从组件本身开始重新渲染。

因此，由于我们正在使用useContext，因此该组件将被重新渲染。

在github中有一个讨论，针对这种情况，提出了3个解决方案。这是link。

Answer 2

您似乎在这里增加count：

 Count: {count.current++}

如果仅显示一个值，则不应在渲染中对其进行突变。

您可以在代码的其他部分中处理此增量，也许编写一种方法来递增counter并在必要时应用它。其他解决方案是创建一个useEffect来处理此计数器。

在这种情况下，由于要在render方法上执行此操作，因此会非常长时间地增加值。

如何防止组件渲染两次？

2 个答案: