为什么我的组件在 react.js 16.x 中渲染了两次？答案

【问题标题】：Why is my component rendered twice in react.js 16.x?为什么我的组件在 react.js 16.x 中渲染了两次？
【发布时间】：2021-01-25 13:48:23
【问题描述】：

这是我打开页面时重新渲染两次的简单组件：

import React, {useState} from 'react'

export default function TestComponent() {
      console.log("test component rendered")
      
      const [count, setCount] = useState(0)
    
      return (
        <div>
          TEST COMPONENT
        </div>
      )
}

这发生在 v16.13.1 中，但在 v.17.0.1 中可以正常工作。有没有办法在 v16.x 中修复它？

【问题讨论】：

你在使用 React 的严格模式吗？
React.memo() 没有帮助
...好的。你在用strict mode吗？
是的。我愿意..

标签： reactjs react-hooks

【解决方案1】：

如果你仍然使用 React 16.x，我猜唯一的方法是使用基于类的组件并通过覆盖 shouldComponentUpdate 方法来控制渲染。

问题在于 React16.x，而不是你或你的组件 :-)

【讨论】：