React useEffect执行顺序

Question

我有一个代码段，它使用了两个组件 - c1和c2：

import "./styles.css";
import React from 'react';

const C1 = ({ children }) => {
  console.log('1');
  React.useEffect(() => {
    console.log('2');
  }, []);
 
  return <>{children}</>;
};
 
const C2 = () => {
  console.log('3');//
  React.useEffect(() => {
    console.log('4');
  }, []);
 
  return <div>YOWZA</div>;
};
 

export default function App() {
  return (<C1>
    <C2/>
  </C1>)
}

我正在尝试了解组件呈现的顺序。控制台显示这样的顺序：

1 1 3 3 4 2 4 2

我不明白为什么显示了两次1和3。另外，如果4和2在组件更新上不重新渲染，为什么显示4和2？