为什么 React 组件渲染计数器会增加 2？

IT技术 javascript reactjs react-component
2021-04-09 15:19:05

我在试验 React 组件时遇到了这个问题。我有一个组件：

window.renderCount=1;

export function Soundscapes() {

    const soundscape = useSelector((s) => s.tasks.soundscape);
    const dispatch = useDispatch();
   
    const [soundscapeAudioElement, setSoundscapeAudioElement] = useState(undefined);
    useEffect(()=>{
        console.log('state just changed to: ', soundscapeAudioElement )
    },[soundscapeAudioElement])

    
    console.log(window.renderCount);
    window.renderCount=window.renderCount+1;

    return (<SomeJSXUnrelatedToQuestion/>)
}

在控制台中，我注意到日志正在进行1,3,5,7,9后续重新渲染。我希望它renderCount每次在屏幕上增加 1时都会打印，例如1,2,3,4,5，每次组件呈现到屏幕时。但它似乎正在增加它，但不是每次都将它打印到控制台。

我在这里错过了什么吗？

1个回答

你可能有StrictMode。StrictMode将有意双重调用“渲染”和其他一些生命周期方法来检测副作用。严格模式检查仅在开发模式下运行；它们不会影响生产构建。检查以下代码段。另外，请注意我使用了 React开发CDN。

function App() {
    const [foo, setFoo] = React.useState(false)
    const counter = React.useRef(0)
    console.log(counter.current++)
    return (
      <button onClick={() => setFoo(f => !f)} > Click </button>
     )
}

ReactDOM.render(<React.StrictMode><App /></React.StrictMode>, document.getElementById('mydiv'))
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<body>
<div id="mydiv"></div>
</body>

非常感谢伙计。情况似乎如此。如果您能查看这个问题，这是发布此related问题背后的真正想法，我将不胜感激。- stackoverflow.com/questions/66196469/...
2021-06-04 15:19:05
其它你可能感兴趣的问题
上一篇BotFramework-WebChat - 自适应卡片 下一篇无法在 Azure App 服务上部署 React JS 应用程序