响应早于父useEffect触发的子useEffect

Question

当应用程序呈现时，子组件useEffect触发的时间早于父层useEffect。为什么会发生这种情况，以及如何解决这个问题？请指点

层：

const Layer = (p) => {
     useEffect(() => {
         console.log(token, "Layer token");
     }, []);
    return (
        <>
            {p.children}
        </>
    )
}
export default Layer;

组件：

const Component = () => {
     useEffect(() => {
         console.log(token, "Component token");
     }, []);
    return (
        <></>
    )
}
export default Component;

使用：

<Layer>
 <Component/>
</Layer>

Answer 1

您只需在Layer组件中有一个呈现条件：

const Layer = (p) => {
  const [isCalled, setIsCalled] = React.useState(false);
  React.useEffect(() => {
    if (!isCalled) {
      console.log("A");
      setIsCalled(true);
    }
  }, [isCalled]);
  return <>{isCalled && p.children}</>;
};

const Component = () => {
  React.useEffect(() => {
    console.log("B");
  }, []);
  return <></>;
};

日志："A"，"B“。

https://codesandbox.io/s/render-condition-call-80rc8