關於react.js條件渲染，或者react.js中的潛在錯誤？

我的工作，對最新動態web應用程序和我的一些代碼： MainContainer.js：關於react.js條件渲染，或者react.js中的潛在錯誤？

renderContent(source) { 
     let content; 
     switch (source) { 
      case 'bbc': 
      case 'cnn': 
      case 'reuters': 
       content = <Guide source={source}/>; 
       break; 
      case 'medium': 
       content=null; 
       break; 
      default: 
       content = null; 
       break; 
     } 

     return content; 
    } 
    render() { 
     let {source} = this.props; 
     return this.renderContent(source); 

    }

這是代碼MainContainer，這是一個容器組件來呈現來自CNN，BBC或不同的新聞。它的包裝部件App

App.js render()

<div> 
     <ScrollableTab sources={sources} handleChange={this.handleSwitchTag.bind(this)} current={current}/> 
     <MainContainer source={sources[current].toLowerCase()}/> 
</div>

當用戶點擊ScrollableTab一些選項卡中，MainContainer變化source財產，這將導致不同的Guide渲染。（一些記錄後，source沒有變化在MainContainer）。

但是，此失敗，Guide未能卸下。只有當用戶點擊Medium這種情況下renderContent()返回null可以Guide umount。

我想，這可能是因爲React.js無法提取類似的組件並進行一些優化，它認爲不需要卸載實際上是不同的「相同」組件。

所以，我想補充key=在renderContent，我的意思是：

renderContent(source) { 
     let content; 
     switch (source) { 
      case 'bbc': 
      case 'cnn': 
      case 'reuters': 
       content = <Guide key={source} source={source}/>; 
       break; 
      case 'medium': 
       content=null; 
       break; 
      default: 
       content = null; 
       break; 
     } 

     return content; 
    } 
    render() { 
     let {source} = this.props; 
     return this.renderContent(source); 

    }

這樣一來，它的工作原理。但是我在React.js的文檔中找不到任何解釋。或者我錯過了一些文檔。有人告訴我這是一個bug還是隻是過度優化？

來源

2017-08-25 吳環宇

文檔中的相關部分：https：//facebook.github.io/react/docs/lists-and-keys.html，https://facebook.github.io/react/docs/reconciliation.html。尤其是：*「鍵幫助React識別哪些項目已更改，添加或刪除。」* –

完整的文章。當你添加關鍵道具指南組件，並針對新源創建一個新的導向器部件（getInitialState方法應該在這種情況下被調用）並將卸載舊的組件，因爲它不再由渲染功能返回。然而，當沒有關鍵道具時，它會使用新的道具更新相同的組件（componentWillRecieveProp方法應該在本例中調用）。渲染方法使用新的道具返回相同的指南組件，因此不應該卸載。

來源

2017-08-25 17:04:03 NishiJain

是的！這是一些調試後的工作原理。我需要根據其道具獲取Guide中的一些數據並將其存儲在其狀態中。我有兩個選擇。添加關鍵的道具，就像我在問題中所做的一樣。2.在指導中覆蓋componentWillReceiveProp以更新其狀態以強制重新渲染。哪種方法更好？ –

我更喜歡第二種方式，因爲它不會導致掛載和卸載。有什麼建議麼？ –

我也更喜歡第二種方式，因爲這會導致現有組件的重新渲染。但是，使用密鑰時，需要安裝新組件並卸載舊組件。 – NishiJain

它在React的文檔中，但本文從Tyler Mcginnis解釋它。

當調用setState時，React將執行的第一件事是將您傳遞給setState的對象合併到組件的當前狀態中。這將啓動一個名爲對帳的流程。對帳的最終目標是以最有效的方式根據這種新狀態更新用戶界面。爲此，React將構造一個React元素的新樹（您可以將其視爲UI的對象表示）。一旦它有了這棵樹，爲了弄清UI如何改變以響應新的狀態，React將會把這個新樹與上一個元素樹區分開來。

Keys幫助React跟蹤哪些項目已更改，已添加或已從列表中刪除。

重要的是每個鍵在兄弟姐妹中是唯一的。我們已經談了幾次關於和解的內容，並且這個和解過程的一部分是對一個新的元素樹進行差異化處理，這是一個新的元素樹。在處理列表時，Keys使這個過程更加高效，因爲React可以使用子元素上的鍵快速知道元素是新的還是比較樹時剛剛移動的元素。 不僅鍵使這個過程更有效率，但沒有鍵，React無法知道哪個本地狀態對應於正在移動的項目。因此，映射時不要忽略鍵。

您可以在這裏找到React Interview Questions

來源

2017-08-25 16:52:01

關於react.js條件渲染，或者react.js中的潛在錯誤？

回答

相關問題