我知道使用API,当上下文状态改变时,提供程序下的所有子组件都将重新呈现。
我想知道的是,是否只有当前屏幕上的组件被重新渲染,或者提供程序下的整个组件(包括页面)被重新渲染,即使它没有显示在屏幕上。
下面的代码是我的一些Nextjs代码。我想向提供程序添加一个公共组件,我将在每个页面上传递一个setState
,它允许更改公共组件的属性。
当每个页面挂载后,常用组件的 prop 也会发生变化,这时候,不仅当前页面被重新渲染,其他所有页面也都被重新渲染?
那我觉得效率太低了,有没有办法优化一下?
// MyProvider
export const MyProvider = ({ children }: { children: ReactNode }) => {
const [title, setTitle] = useState('');
return (
<MyContext.Provider
value={{
title,
setTitle
}}
>
<CommonComponent title={title} />
{children}
</MyContext.Provider>
);
};
// _app.tsx
…
return (
<MyProvider>
<Component {...pageProps} />
</MyProvider>
)
1条答案
按热度按时间6gpjuf901#
一次只渲染一个页面。例如,对于下面的
_app.js
,Next.js团队says the following:Component
prop是活动页面,因此每当您在路由之间导航时,Component
都会更改为新的page
。因此,您发送给Component
的任何prop都会被page
接收。由于您正在将
children
传递给MyProvider
,因此当上下文更改时,只有直接使用它的当前页面的组件才会重新呈现。