Question

我有一种奇怪的行为。一旦我将套接字连接添加到react / redux系统，一旦调度下一个Action，我的主要组件将始终被重新呈现。

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

有人可以帮我在这里走上正轨吗？非常感谢！

设置反应0.15.x 终极版 react-router v4 反应路由器-终极版

app.jsx和容器的应用结构：

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>
    );
  }
}

RootContainer

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组件似乎connect为Redux，因此每次都可能会重新渲染。有两种主要方法可以优化：

仅将较低级别的组件连接到所需的状态。 Redux的connect高阶组件仅在mapStateToProps产生不同结果时重新呈现。在组件树中更低粒度级别执行此操作会减少必须在商店更新时重新呈现的组件数量。
为任何未连接到Redux的子项扩展React.PureComponent，并且不需要在每次父项执行时重新渲染。默认情况下，当顶级组件重新渲染时，其所有子级都会重新渲染。 PureComponent可以阻止这种情况。

这只是一般建议，如果不了解更多应用程序的结构，很难说你应该做些什么。

Redux // React Component在动作调度后呈现两次

1 个答案: