Question

我目前正在React应用程序中实现指标/分析，并且尝试按打开页面的顺序记录页面(related)。我有一个页面，例如ParentComponent，并且在其中嵌入了子组件，例如ChildComponent。

const ParentComponent = () => {
   // log page using useEffect
   return (<ChildComponent />)
}

const ChildComponent = () => {
   // log page using useEffect
   // return something else 
}

两个组件都有useEffects例如

useEffect(() => {
   // log page e.g ParentComponent or ChildComponent.
}, []);

但是，我每次都注意到孩子的useEffect在父母的孩子之前被调用。我的理解是，这是可以理解的，因为孩子先于父母被完全渲染。但是我需要知道在调用孩子的功能之前，是否有什么方法可以确保我可以先在父母的功能中调用？

谢谢。

Answer 1

您对useEffect打算采取的行为是不可能的。这是一个可能的解决方法：

function App() {
  return(
    <ParentPage/>
  );
}

function ParentPage() {

  const logParent = React.useCallback(() => {
    console.log("Logging ParentPage...");
  },[]);
  
  return(
    <React.Fragment>
      <div>I am ParentPage...</div>
      <ChildPage
        logParent={logParent}
      />
    </React.Fragment>
  );
}

function ChildPage(props) {

  React.useEffect(() => {
    if (props.logParent) {
      props.logParent();
    }
    console.log("Logging ChildPage...");
  },[]);

  return(
    <div>I am ChildPage...</div>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

在子组件的useEffect

1 个答案: