我注意到我的一些组件在我不希望的时候重新招标.假设我有一个<Header />
分量.<Header />
呼叫useSelector
,并获取状态的一部分.例如,我的整个reduxstore 可能是这样的:
{
header: "header slice",
body: "body slice"
}
<Header />
使用use selector获取所需信息:
const Header = () => {
const headerSlice = useSelector(state => state.header);
return <div>{headerSlice}</div>;
}
在应用程序的其他地方,有一些东西会导致body
切片更新.当这种情况发生时,我看到<Header />
部重播.这不是我所期望的.Why might this be happening?
要了解更多细节,我可以通过运行devtools探查器,同时触发更新state.body
的操作来跟踪这一点.我看到<Header />
个重播,我的剖析器告诉我这是由于"Hooks 4、9、14、19和24"发生了变化.
当我在devtools中查看该组件的挂钩时,我看到所有这些挂钩似乎都是 Select 器的一部分->;与 Select 器同步外部存储:
但是这里没有太多信息来告诉我是哪个 Select 器,以前的值是什么,等等.当我删除这些 Select 器时,不必要的重新渲染器停止了.但该组件使用的值不是正在更新的值.我试着用React包装组件.备忘录,这没什么区别.我以前在使用redux时没有遇到过这个问题.通常,存储更新只会在那些更新了useSelect
个值的组件中引起重新渲染.
我使用的是react 18.2.0、redux 4.2.0、react redux 8.0.2和webpack 5.