反應：父組件重新渲染所有的孩子，即使那些在狀態變化時沒有改變的孩子

Question

我一直無法找到明確的答案，希望這不是重複的。

我使用React + Redux進行簡單的聊天應用程序。該應用程序由InputBar，MessageList和Container組件組成。容器（如你所想象的那樣）包裹了其他兩個組件並連接到商店。我的消息的狀態以及當前消息（用戶當前正在輸入的消息）都保存在Redux商店中。簡體結構：

class ContainerComponent extends Component { 
    ... 
    render() { 
    return (
     <div id="message-container"> 
     <MessageList 
      messages={this.props.messages} 
     /> 
     <InputBar 
      currentMessage={this.props.currentMessage} 
      updateMessage={this.props.updateMessage} 
      onSubmit={this.props.addMessage} 
     /> 
     </div> 
    ); 
    } 
} 

更新當前消息時發生我遇到的問題。更新當前消息會觸發更新存儲的操作，該操作會更新通過容器並返回到InputBar組件的道具。

這有效，但副作用是我的MessageList組件每次發生這種情況都會重新呈現。 MessageList沒有收到當前消息，也沒有任何理由更新。這是一個大問題，因爲一旦MessageList變大，每次當前消息更新時，應用程序變得明顯更慢。

我試着設置和更新InputBar組件中的當前消息狀態（因此完全忽略了Redux體系結構）並且「修復」了問題，但是如果可能的話，我想堅持使用Redux設計模式。

我的問題是：

• 如果父組件的更新，也總是反應更新組件內的所有直接子？

• 這裏的正確方法是什麼？

Answer 1

如果父組件的更新，也總是反應更新組件內的所有直接子？

號陣營只會重新渲染的成分，如果shouldComponentUpdate()返回true。默認情況下，該方法始終返回true以避免新手出現任何微妙的錯誤（並且正如William B指出的那樣，除非更改某些內容，否則DOM不會實際更新，從而降低影響）。

爲了防止您的子組件從重新呈現不必要的，你需要實現shouldComponentUpdate方法以這樣的方式，當數據實際上已經改變了它只返回true。如果this.props.messages總是相同的陣列，也可能是這樣簡單：

shouldComponentUpdate(nextProps) { 
    return (this.props.messages !== nextProps.messages); 
} 

您可能還希望做一些比較深或者消息的ID或東西的比較，這取決於你的需求。