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

Question

我正在處理新聞提要Web應用程序和我的一些代碼： MainContainer.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無法消除類似的組件並且通過一些優化，它認為不需要卸載實際上是不同的“相同”組件。

所以，我在renderContent添加key= ，我的意思是：

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的文檔中找不到任何解釋。 或者我只是錯過了一些docs.Can有人告訴我這是一個錯誤還是過度優化？

Answer 1

它出現在React的文檔中，但來自Tyler Mcginnis的這篇文章解釋了它。

調用setState時，React將做的第一件事是將傳遞給setState的對象合並到組件的當前狀態。 這將啟動一個稱為對帳的流程。 協調的最終目標是以最有效的方式根據此新狀態更新UI。 為此，React將構造一個新的React元素樹（您可以將其視為UI的對象表示）。 一旦它有了這個樹，為了弄清楚UI應該如何響應新狀態，React會將這個新樹與前一個元素樹區分開來。

密鑰有助於React跟蹤哪些項目已更改，已添加或已從列表中刪除。

重要的是每個鍵在兄弟姐妹中都是獨一無二的。 我們已經討論了幾次關於和解的問題，並且這個和解過程的一部分正在執行一個新元素樹與最前一個元素樹的差異。 在處理列表時，鍵使此過程更有效，因為React可以使用子元素上的鍵來快速了解元素是否為新元素，或者在比較樹時是否僅移動了元素。 而且不僅密鑰使這個過程更有效，而且沒有密鑰，React無法知道哪個本地狀態對應於移動的項目。 所以在映射時永遠不要忽略鍵。

你可以在這里找到完整的文章React Interview Questions

Answer 2

當您向Guide組件添加key prop時，它會為每個新源創建一個新的Guide組件（在這種情況下應該調用getInitialState方法），並且將卸載舊組件，因為render函數不再返回它。 但是，當沒有key prop時，它會使用新的prop更新相同的組件（在這種情況下應該調用componentWillRecieveProp方法）。 render方法使用新的prop返回相同的Guide組件，因此不應卸載。