Question

我正在使用react和redux创建一个应用程序。我想阻止子组件在父组件中更新，即使它们独立地连接到状态。 shouldComponentUpdate并不能阻止这种情况发生。这有可能吗？也许喜欢缓存孩子们的预渲染版本？我根本不需要它是交互式的，甚至不需要滚动。我只是需要它在视觉上相同。

代码示例：

class SomeComponent extends Component {
  constructor() {
    super()
    this.state = { dontReload: false }
  }

  render() {
    return (
      <div>
        <SomeStateConnectedComponent />
      </div>
    )
  }
}

如果dontReload为真，我怎么能这样做状态连接组件不会更新？

Answer 1

您可以导出<SomeStateConnectedComponent />所基于的非连接组件，然后将一些假冒道具（包括() => {}等回调）传递给它，并使用它而不是连接版本？这应该创建并显示该组件的非更新版本。

因为听起来你会被迫改变<SomeStateConnectedComponent />内的代码（至少传递一些额外的道具），只是为了这个（似乎）非常小众的用例。

编辑：与state.dontReload一起使用，您可以执行条件渲染，类似

return this.state.dontReload ?       
     <NonConnectedComponent fakeProp={42} /> :
      <SomeStateConnectedComponent />

禁止更新连接到redux状态的子组件

1 个答案: