useState，带有“ new”关键字作为参数

我正在构建一个单独的服务来处理复杂的事物，该服务是一个类，仅出于测试建议，我在useState内进行模拟。

关键是我忘了在构造函数中使用console.log并意识到在重新渲染组件时，类构造函数被调用了很多次。这种行为不会导致意外行为或类似的事情，但是我在问自己为什么会这样，因为我知道在useState内声明的内容不会重复出现，但是显然我错误导致了以下问题。

我创建了一个小沙箱来举例说明我的意思，您可以看到“被叫”一词在控制台上显示了很多次，并一直显示单击按钮。 https://codesandbox.io/s/new-class-inside-usestate-w9et3?file=/src/App.js

这是一个常见的错误，在React文档中没有明确提及。

在每个渲染上执行的功能组件的主体。从构造函数登录是预期的行为，因为编写以下代码：

const [example] = useState(new Foo());

将在每个渲染器上调用new Foo()的结果，是的，尽管useState钩子未考虑该结果。

因此，您希望将lazy initial命名为一次：

const [example] = useState(() => new Foo());

initialState参数是初始渲染期间使用的状态。在后续渲染中，将忽略它。 如果初始状态是昂贵的计算结果，则可以提供一个函数，该函数将仅在初始渲染时执行。

Cus useState(/* whatever expression here */)仍然是JS表达式。与React无关，它只是JS的工作方式，parens ()中的内容将始终得到评估。

让我们useState离开，如果您愿意，请考虑一下randomFunction()：

setInterval(() => {
  randomFunction(new RandomClass());
},1000)

RandomClass每1秒会实例化一次吗？当然会。

React中发生了同样的事情。

function MyApp() {
  const [myClass,setMyClass] = useState(new RandomClass())
  // ...
}

每次重新渲染<MyApp />时，必须重新运行该函数，因此必须重新RandomClass()重新new。误导您的是useState()的效果。它会将在内部传入的表达式作为首次渲染时的初始值，并丢弃在重新渲染后传入的任何内容。但是那个表情仍然在消失。

它只是一个表达式，其结果是该类的实例。碰巧构造函数还记录了一些数据。可以通过使用useState((function(){console.log("Called")})());来复制相同的行为。这不一定意味着它将为您的状态设置该类的新实例，因为它是在第一次呈现组件时设置的。

可以在useEffect

中对此理论进行检验

React.useEffect(()=>{
  console.log(exemple === exemple)
})

您将看到它返回true，因为它是对同一类的引用，并且没有发生状态更改。在这种设置下，对应用程序的影响是时间复杂度的增加，因为它确实会在每次渲染时实例化一个新类。