reactjs - 在 React 中，第一次出现在页面上时以不同方式呈现组件的最佳方式是什么？

Question

我有一些 React 组件将在我的应用程序中大量使用。

我只希望它们在 DOM 中第一次打印时返回为

<symbol id="SVGComponent"><SVGComponent></symbol><use href="#SVGComponent" />

而接下来的每一次打印都应该是唯一的 <use href="#SVGComponent" />因为符号已经在页面中声明了

const [firstTime, setFirstTime] = useState(true);

useEffect(() => { setFirstTime(false) }, []);

if (firstTime) {
    return (<symbol id="Component"><Path /></symbol>);
}
else {
    return(<use href="#Component"/>);
}

到目前为止，这是我的代码，但条件总是返回 false .

在 React 中如何实现 useEffect ？ 预先感谢您的帮助

Answer 1

并不是说你的条件总是返回false。问题是您在第一次渲染后立即更改状态(在 useEffect 中，您将状态变量值设置为 false)，这会导致另一个立即重新渲染，因此您跳过true 变量的条件(从技术上讲，您不会跳过它，您只需呈现 true 状态，然后立即使用 false 重新呈现)。

如果您不更改安装 useEffect 中的状态，您会注意到代码可以正常工作。但是，为了做到这一点，您必须使用 useRef，它基本上使您能够创建一个在重新渲染之间持续存在的变量，但其值的变化不会导致重新渲染(与状态变量不同来自 useState)。

我添加了一个按钮来模拟状态变化，换句话说 - 模拟第二次渲染:

import React, { useState, useRef, useEffect } from 'react';

function App() {
    const [buttonClicked, setButtonClicked] = useState(false);

    const isFirstRender = useRef(true);

    useEffect(() => {
        isFirstRender.current = false;
    }, []);

    const renderRepresentation = () => {
        if (isFirstRender.current) {
            return (
                <symbol id="Component">
                    <Path />
                </symbol>
            );
        }
        else {
            return (
                <use href="#Component" />
            );
        }
    }

    return (
        <>
            {renderRepresentation()}
            <button onClick={() => setButtonClicked(true)}>SIMULATE STATE CHANGE</button>
        </>
    );
}

这是一个 codesandbox demo你可以试试。