javascript - 如果使用状态，为什么功能组件会执行两次

Question

我想知道为什么调用 React useState 会导致功能组件被执行两次。请看一个例​​子。

使用以下主体实例化 Dummy 组件：

const Dummy = () => {

  console.log('[Dummy] starting');

  return (
    <p>Dummy</p>
  )
};

输出：

[App] start
[Dummy] starting

但对于以下机构：

const Dummy = () => {

  const [loading, setLoading] = useState(false);
  console.log('[Dummy] starting');

  return (
    <p>Dummy</p>
  )
};

控制台显示：

[App] start
[Dummy] starting
[Dummy] starting

两种情况的共同父代码：

const app = () => {
  console.log('[App] start');
  return (
    <Dummy />
  );
};

谢谢。

标签： javascriptreactjsreact-hooks