为什么上下文组件在 NextJs 页面路由期间重新评估？

给定一个基本的 NextJs 应用程序，其中包含一个简单的上下文组件和几个页面

// AppContextWrapper.js

export function AppContextWrapper(props) {
  console.log('AppContextWrapper - component function executed');
  const appContextState = useState();
  
  return (
    <AppContext.Provider value={appContextState}>
      {props.children}
    </AppContext.Provider>
  );
}


// _app.js

function MyApp({ Component, pageProps }) {
  return (
    <AppContextWrapper>
      <Layout>
         <Component {...pageProps} />
      </Layout>
    </AppContextWrapper>
  );
}

我注意到从一个页面导航到另一个页面会触发重新执行AppContextWrapper组件功能。

在基本的非 NextJs React 应用程序中，这种情况不会发生。

// index.js

ReactDOM.render(
  <React.StrictMode>
    <AppContextWrapper>
      <App />
    </AppContextWrapper>
  </React.StrictMode>,
  document.getElementById('root')
);

// app.js

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to='/'>Home</Link>
            </li>
            <li>
              <Link to='/other'>Other</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path='/other'>
            <OtherPage />
          </Route>
          <Route path='/'>
            <HomePage />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

发生这种情况可能是因为在 NextJs 应用程序导航中导致重新分配Component and pageProps in _app.js因此导致重新执行MyApp组件功能。

我有几个与此相关的问题。

重新执行上下文组件函数是否存在潜在问题？

NextJs 应用程序中是否有某个位置可以安装上下文组件来避免重新执行？

最后，我看到了使用的代码useMemo在上下文函数中，就像这样......

// appContextWrapper.js

export function AppContextWrapper(props) {
  console.log('AppContextWrapper component function executed');
  const [appState, setAppState] = useState({});

  const appContextState = useMemo(() => ({ appState, setAppState }), [appState, setAppState]);

  return (
    <AppContext.Provider value={appContextState}>{props.children}</AppContext.Provider>
  );
}

我不明白这种方法是否合理？我的理解是useMemo应用于记忆不会改变的 props 或计算值，以防止子组件的组件函数不必要地重新执行。使用useMemo保存已由 React 通过 useState 管理的值似乎毫无意义且多余。

我认为您所描述的问题是由于不使用浅层路由而导致的。

Nextjs 文档声明了这一点：

浅层路由允许您更改 URL，而无需再次运行数据获取方法，其中包括 getServerSideProps、getStaticProps 和 getInitialProps。

您将通过路由器对象（由 useRouter 或 withRouter 添加）接收更新的路径名和查询，而不会丢失状态。

https://nextjs.org/docs/routing/shallow-routing https://nextjs.org/docs/routing/shallow-routing

您可以通过执行以下操作在 Link 中使用浅层路由：

<Link to='/other' shallow>Other</Link>

并在推喜欢这个

push({pathname: "/other"},undefined,{shallow: true})