Reactjs 反应什么'；当组件第一次出现在页面上时，以不同方式呈现组件的最佳方式是什么？

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

我希望只有当它们第一次在DOM中打印时，它们才会返回

而每隔一段时间打印一次

，因为该符号已在页面中声明

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

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

if（第一次）{
返回（）；
}
否则{
return（）；
}

到目前为止，这是我的代码，但条件始终返回

false

这在与

useffect

的反应中是如何可能的？

---

提前感谢您的帮助

组件本身无法判断是否存在其他组件。您需要在应用程序的更高级别上存储此信息，然后通过道具告知组件它是否是第一个实例。

组件本身无法告知是否存在其他组件本身。您需要将此信息存储在应用程序的更高级别，然后通过道具告诉组件它是否是第一个实例。

您的条件并非总是返回

false

。问题是，在第一次渲染后立即更改状态（在

useffect

中，将状态变量值设置为

false

），这会导致另一个立即重新渲染，因此跳过变量的

true

条件（从技术上讲，您不会跳过它，只需渲染

true

状态，然后立即使用

false

重新渲染即可）

如果您不更改装载

useffect

中的状态，您会注意到代码工作正常。但是，为了做到这一点，您必须使用

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>
        </>
    );
}

import React，{useState，useRef，useffect}来自'React'；
函数App（）{
const[buttonClicked，setButtonClicked]=useState（false）；
const isFirstRender=useRef（true）；
useffect（（）=>{
isFirstRender.current=false；
}, []);
常量renderPresentation=（）=>{
if（isFirstRender.current）{
返回(
);
}
否则{
返回(
);
}
}
返回(
{renderPresentation（）}
setButtonClicked（true）}>模拟状态更改
);
}

---

这是一个您可以尝试的方法。

这并不是说您的条件总是返回

false

。问题是您在第一次渲染后立即更改状态（在

useffect

中，您将状态变量值设置为

false

）这会导致另一个立即重新渲染，因此您跳过变量的

true

条件（从技术上讲，您不会跳过它，您只需渲染

true

状态，然后立即使用

false

重新渲染）

如果您不更改装载

useffect

中的状态，您会注意到代码工作正常。但是，为了做到这一点，您必须使用

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>
        </>
    );
}

import React，{useState，useRef，useffect}来自'React'；
函数App（）{
const[buttonClicked，setButtonClicked]=useState（false）；
const isFirstRender=useRef（true）；
useffect（（）=>{
isFirstRender.current=false；
}, []);
常量renderPresentation=（）=>{
if（isFirstRender.current）{
返回(
);
}
否则{
返回(
);
}
}
返回(
{renderPresentation（）}
setButtonClicked（true）}>模拟状态更改
);
}

---

这是一个你可以尝试的方法。

因此，对于任何来的人，我都会再次回复自己。幸运的是，我只需要几行代码就可以实现。感谢这家伙提供的代码：

---

因此，我最后再次回复了我自己，希望有人能来。幸运的是，我只需要几行代码就可以实现。感谢这家伙的代码：

---

我不明白你的问题。但正如你所说的“什么是最好的方式…”。你能告诉我们做这件事的正常/不好的方式，即你目前的方式吗？用我的代码更新了问题，谢谢你的帮助。现在已经清楚了一半。你所说的“第一次”到底是什么意思？这是组件循环-1.安装2.重新加载3.重新加载…..如此，最后一步-卸载。哪一步编号是第一次？是第一步，即安装一步？也许你可以通过向我们展示一个完整但最小的问题示例来更好地解释。我的意思是：当你检查页面时，页面上的第一个输出实例。我希望它是differentI我不理解你的问题。但正如你所说的“什么是最好的方式…”。你能告诉我们做这件事的正常/不好的方式，即你目前的方式吗？用我的代码更新了问题，谢谢你的帮助。现在已经清楚了一半。你所说的“第一次”到底是什么意思？这是组件循环-1.安装2.重新加载3.重新加载…依此类推，最后一步-卸载。哪一步是第一次？是第一步，即安装一步？也许你可以通过向我们展示一个完整但最小的问题示例来更好地解释。我的意思是：非常第一步

let instancesCount = 0
function Component(props) {
        const [firstRender, setFirstRender] = useState(false)
        useEffect(() => {
            setFirstRender(instancesCount === 0)
            instancesCount++
            return () => { instancesCount-- }
        }, [])

        if (firstRender)
           //do something only the first time the component appears

}