为什么 useEffect 不会在每次渲染时触发？

Question

我的组件有两个Rect.useEffect钩子

const Example = ({ user }) => {
  React.useEffect(() => {
    autorun(() => {
      console.log("inside autorun", user.count);
    });
  });

  // Only runs once
  React.useEffect(() => {
    console.log("Why not me?");
  });

  return <Observer>{() => <h1>{user.count}</h1>}</Observer>;
};

我使用mobx. 它被正确地重新渲染。但是"Why not me?"只打印一次。

根据官方文档

默认情况下，效果在每次完成渲染后运行

这意味着console.log("Why not me?");也应该在每次user更新prop 时运行。但事实并非如此。控制台输出是这样的

这种明显的不一致背后的原因是什么？

我的完整代码可以在这里查看

Answer 1

在 Mobx 中，就像Observer提供渲染函数回调的组件一样，autorun函数也独立于 react 生命周期执行。

发生此行为是因为您将用户计数作为可观察变量。

根据 mobx-react 文档

Observer 是一个 React 组件，它将观察者应用于组件中的匿名区域。它接受一个单一的、无参数的函数作为子函数，该函数应该只返回一个 React 组件。函数中的渲染将被跟踪并在需要时自动重新渲染。

和 mobx 文档

当autorun使用时，所提供的功能总是会一次立即触发，然后再对其依赖的变化，每次一个。

您可以通过直接在功能组件内部登录来确认此行为，您将观察到该组件仅呈现一次

编辑：

回答你的问题

如果我改成useEffect这个

React.useEffect(autorun(() => {console.log("inside autorun", user.count)}));

基本上删除匿名函数useEffect并直接传递自动运行，然后它只运行一次。为什么会这样？有什么不同？

不同之处在于autorun返回 a disposer function，当运行时将处理它autorun并且不再执行它。

从文档：

autorun 的返回值是一个 disposer 函数，可用于在您不再需要 autorun 时对其进行处理。

现在发生的情况是，由于 useEffect 在运行时执行提供给它的回调，执行的回调是disposerautorun 返回的函数，它实质上取消了您的自动运行。