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組件在動作調度後渲染兩次

回答

相關問題