javascript - 在渲染任何组件后有一个 useEffect 钩子(Hook)

Question

所以我有渲染组件的路由:

const Layout = () => {

  return (
    <InitLayout>
      <Switch>
        <Redirect exact from='/' to='/home/recent' />
        <Route path="/home/:category" exact component={Home}></Route>
        <Route path="/about" exact component={About}></Route>
        <Route path="/help" exact component={Help}></Route>
        <Route path="/users/:userId" exact component={UserProfile}></Route>
        <Route path="/ask" exact component={AskQuestion}></Route>
        <Route path="/review" exact component={ReviewPost}></Route>
        <Route path="/posts/:postId/review" exact component={ReviewPost}></Route>
        <Route path="/users/:userId" exact component={UserProfile}></Route>

        <Redirect from='*' to='/home/recent' />
      </Switch>
    </InitLayout>
  );
};

在任何这些组件中，理论上我都会设置以下效果:

  useEffect(() => {
    if (!isSsr) {
      fetchPosts();
    }
    setSsrState({ isSsr: false }); // ==> Here 
  }, []);

此代码基本上会设置 SSR 状态，以防止客户端在数据已从服务器预加载时重新向服务器请求数据。

现在需要从任何组件设置此状态，但我不想在所有组件中重复此代码。忘记放置它会导致错误，所以这绝对是一个坏主意。

是否有一种直接的方法来定义一次效果，并在每个路由的组件中调用它？

Answer 1

与 Trace 交谈后，可以通过使用 HOC 包装布局组件(将 SSR 状态设置为 false)来解决该问题。

有趣的是，通过将组件包装在 HOC 内，这会在 HOC 组件之前首先启动子组件。这样，我们就可以首先检查子组件级别是否设置了 SSR。运行子组件 useEffect 后，再运行 HOC useEffect，这会将 SSR 标志设置回 false。