Reactjs 嵌套react redux连接组件的呈现不一致
我想我们已经被(避免层叠渲染的策略)所困扰,但我不知道该怎么办 简而言之,子组件正在接收属性更新,并在父组件接收其道具更新之前执行父组件的绑定渲染回调。结果是回调使用了过时的属性,我们得到了不一致的呈现 下面是一个粗略的描述:Reactjs 嵌套react redux连接组件的呈现不一致,reactjs,redux,Reactjs,Redux,我想我们已经被(避免层叠渲染的策略)所困扰,但我不知道该怎么办 简而言之,子组件正在接收属性更新,并在父组件接收其道具更新之前执行父组件的绑定渲染回调。结果是回调使用了过时的属性,我们得到了不一致的呈现 下面是一个粗略的描述: 类父级扩展React.Component{ renderHeader=()=>{ 返回 } 渲染(){ 返回() } } 函数MapStateTops(状态){ 返回Object.assign({},state.tree.branch) } 导出默认连接(MapState
类父级扩展React.Component{
renderHeader=()=>{
返回
}
渲染(){
返回()
}
}
函数MapStateTops(状态){
返回Object.assign({},state.tree.branch)
}
导出默认连接(MapStateTops)(父级);
...
子类扩展了React.Component{
渲染(){
返回(
...
this.props.renderHeader()
...
)
}
}
函数MapStateTops(状态){
返回Object.assign({},state.tree.branch)
}
导出默认连接(MapStateTops)(子级);
我可以通过显式地将道具传递给回调来实现这一点,或者通过避免这种模式来实现这一点,但我觉得这里有一个更大的概念/模式/反模式,我无法理解。问题:
- 将两个组件连接到状态树实际上是否无效
- 父母还是孩子先得到道具,有没有明确的逻辑
state.tree.branch
+renderHeader
的组合道具实际上没有改变,因此React-Redux的默认实现shouldComponentUpdate()
没有看到任何改变并跳过呈现。这就是说,让子组件使用回调进行渲染似乎。。。古怪的为什么不让父级渲染标题,并将其作为道具或嵌套组件直接传递给子级?重新排序解决了这个问题,但我不能100%确定我们在其他地方没有这样做。另外,ListView还需要一个。现在还不清楚它是否应该连接。相关问题提到了batchedUpdates,其中“父母将首先和解,以便孩子只渲染一次(使用他们父母和他们最新状态的最新道具)。”而不是我们看到的?是的,将渲染组件作为道具传递可能会解决此问题。谢谢你的想法!