Redux // React 组件在动作分派后渲染两次

Question

我有一个奇怪的行为。一旦我将套接字连接添加到 react/redux 系统，我的主要组件总是会被重新渲染，只要下一个 Action 被调度。

我也有这种行为，当我再次单击导航链接（发送相同的路由操作）时，组件也会重新渲染，即使我停留在同一页面上。

任何人都可以在这里帮助我走上正轨吗？非常感谢！

设置 react 0.15.x redux react-router v4 react-router-redux

容器的 app.jsx 和 App 结构：

class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Router history={history}>
          <Route path="/" component={RootContainer}>
            <IndexRoute component={HomePage} />
            <Route path="/start" component={StartPage} />
            <Route path="*" component={NotFoundPage} />
          </Route>
        </Router>
      </Provider>
    );
  }
}

根容器

class RootContainer extends React.Component {

...

  componentWillMount() {
    this.connectToSocket();
    this.joinChannel();
  }

  componentWillUnmount() {
    this.socket.disconnect();
  }
...

  connectToSocket() {
    this.socket = new Socket('/socket');
    this.socket.connect();
    this.socket.onOpen(() => {
      this.props.connectState();  // ACTION CALL
    });
    this.socket.onError((err) => {
      this.props.disconnectState(err); // ACTION CALL
    }
  }

...

减速器

Answer 1

有些东西正在改变商店的状态。看起来您的RootContainer组件已被connectRedux 编辑，因此每次都可能重新渲染。有两种主要的优化方法：

• 仅将较低级别的组件连接到它们需要的状态。Redux 的connect高阶组件仅在mapStateToProps产生不同结果时重新渲染。在组件树较低的更细粒度级别执行此操作可减少必须在商店更新时重新呈现的组件数量。

• 扩展React.PureComponent任何未连接到 Redux 的子级，并且不需要每次父级都重新渲染。默认情况下，当顶级组件重新渲染时，它的所有子组件也会重新渲染。PureComponent可以防止。

这只是一般性建议，如果没有看到更多应用程序的结构，很难说你到底应该做什么。