Redux // React组件在动作调度后渲染两次

我有一个奇怪的行为。一旦将套接字连接添加到react/redux系统，一旦分派下一个Action，我的主要组件总是会被重新渲染。Redux // React组件在动作调度后渲染两次

我也有这种行为，当我再次点击一个导航链接（调度相同的路由动作）， compoenent也rerenders，即使我留在同一页面。

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

设置反应0.15.x 终极版反应路由器V4 反应路由器-终极版

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

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

...

减速

来源

2017-03-17 radosch

简短的版本是，不断变化你的应用程序的状态。很难说没有看到你的reducer，但套接字会经常发送数据（保持活跃或其他）。你可能只想在socket感兴趣的时候改变状态。 –

感谢@RobDrimmie。我认为一个组件只有在状态改变时才会改变，并且只重新渲染那些需要重新渲染的组件。 P.S.连接状态必须坚持并且很有趣，因为我们正在建立聊天。所以我们希望在断开连接时通知和UI锁定。 – radosch

你是正确的，一个组件的render（）函数只会在状态改变时被调用。由于你的名字变得很多，国家正在改变很多。如果没有看到你的套接字处理函数或reducer，很难推测什么是状态改变。我在猜测，无论处理套接字是否对不断变化的状态负责。 –

东西正在改变商店状态。看起来你的RootContainer组件是connect编辑Redux，所以它可能每次重新渲染。有两种主要的优化方法：

只将低级组件连接到它们需要的状态。当mapStateToProps产生不同的结果时，Redux的connect高阶组件只会重新显示。在组件树中更细化的级别执行此操作可减少必须在存储更新上重新渲染的组件数量。
对于没有连接到Redux的任何儿童，将其延伸到React.PureComponent，并且每次他们的父母都不需要重新提交。默认情况下，当顶级组件重新呈现时，其所有子级也会重新渲染。 PureComponent可以防止这种情况。

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

来源

2018-02-03 23:45:01

Redux // React组件在动作调度后渲染两次

回答

相关问题