在 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的演示，你可以试试。

Answer 2

组件本身将无法判断是否存在其他组件。你需要将这些信息存储在应用程序的更高层，然后通过props告诉组件它是否是第一个实例。

Answer 3

所以最后我又回复了自己。幸运的是，我想要实现的是可能的只有几行代码。感谢这个家伙的代码:https://stackoverflow.com/a/57331421/3937587

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
}