reactjs - 使用 `new` 关键字作为参数的 useState

Question

我正在构建一个处理复杂事物的独立服务，该服务是一个类，仅用于测试建议，我在useState.

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

1. 为什么会发生这种情况？（我没有找到关于这个特定案例的任何文档）
2. 这会影响内存或处理吗？（由于该类已多次重新实例化）
3. 垃圾收集器收集那个？

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

标签： reactjsreact-hooksuse-state

Answer 1

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

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

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

是否会new Foo()在每次渲染时调用结果，是的，尽管钩子没有考虑它的结果。useState

---

因此，您希望将其设为惰性初始值，因为您希望它被调用一次：

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

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