【譯】在React中實作條件渲染的7種方法

原文地址：https://scotch.io/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications

借助React，我們可以構建動態且高度互動的單頁應用程式，充分利用這種互動性的一種方法是通過條件渲染，

目錄

• 挑戰
• 解決方法
  1. 使用if…else陳述句
  2. 使用元素變數
  3. 使用switch陳述句
  4. 三元運算子
  5. 邏輯運算子&&
  6. 使用立即呼叫函式運算式（IIFE）
  7. 使用增強的JSX
• 性能問題
• 總結

條件渲染一詞描述了根據某些條件渲染不同UI標簽的能力，在React檔案中，這是一種根據條件渲染不同元素或組件的方法，此概念通常被應用到如下情況中：

• 從API渲染外部資料
• 顯示/隱藏元素
• 切換應用程式功能
• 實作權限級別
• 認證與授權

在本文中，我們將研究在React應用程式中實作條件渲染的7種方法，

挑戰

首先，根據在組件state中isLoggedIn的值，我們希望能夠在用戶未登入時顯示Login按鈕，在用戶登入時顯示Logout按鈕，

下圖是我們初始組件的截圖：

代碼如下：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: true
    };
  }
  render() {
    return (
      <div className="App">
        <h1>
          This is a Demo showing several ways to implement Conditional Rendering in React.
        </h1>
        <button>Login</button>
        <button>Logout</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在線測驗：CodeSandBox

解決方法

在代碼段中，…表示某些與所解釋要點沒有直接聯系的代碼，

1. 使用if…else陳述句

使用if…else陳述句允許我們可以指出，如果條件為true，則執行特定的操作，否則將執行其他操作，使用示例，我將測驗if…else通常用于在React中條件渲染的兩種方法，

• 將條件渲染提取到函式中

在JSX中，我們可以將JS代碼和HTML標簽放在一起，以確保程式內具有驚人的互動性，為此，我們使用大括號{}并在其中撰寫我們的JS，但在括號內能做事情也是有限的，例如，下面代碼的結果并不能實作我們想要的結果，

// index.js
...
render() {
  let {isLoggedIn} = this.state;
  return (
    <div className="App">
      <h1>
        This is a Demo showing several ways to implement Conditional Rendering in React.
      </h1>
      {
        if(isLoggedIn){
          return <button>Logout</button>
        } else{
          return <button>Login</button>
        }
      }
    </div>
  );
}
...

要了解更多相關資訊，請訪問此鏈接，

為了解決這個問題，我們將條件邏輯提取到一個函式中，如下所示：

// index.js
...
render() {
  let {isLoggedIn} = this.state;
  const renderAuthButton = ()=>{
    if(isLoggedIn){
      return <button>Logout</button>
    } else{
      return <button>Login</button>
    }
  }
  return (
    <div className="App">
      <h1>
        This is a Demo showing several ways to implement Conditional Rendering
        in React.
      </h1>
      {renderAuthButton()}
    </div>
  );
}
...

注意，我們將邏輯從JSX提取到函式renderAuthButton中，因此，我們只需要在JSX大括號內執行函式即可，

• 多個回傳陳述句

在使用此方法時，組件必須盡可能的簡單，以避免兄弟或父組件的重新渲染，因此，我們創建了一個名為AuthButton的新組件，

// AuthButton.js

import React from "react";

const AuthButton = props => {
  let { isLoggedIn } = props;
  if (isLoggedIn) {
    return <button>Logout</button>;
  } else {
    return <button>Login</button>;
  }
};
export default AuthButton;

AuthButton根據通過組件屬性isLoggedIn傳入的狀態值，回傳不同的元素和組件，因此，我們將其匯入index.js并將狀態值傳入，如下所示：

// index.js
...
import AuthButton from "./AuthButton";

...
  render() {
    let { isLoggedIn } = this.state;
    return (
      <div className="App">
      ...
        <AuthButton isLoggedIn={isLoggedIn} />
      </div>
    );
  }
...

一定要避免下面的操作：

// index.js
...
render() {
  let { isLoggedIn } = this.state;
  if (isLoggedIn) {
    return (
      <div className="App">
        <h1>
          This is a Demo showing several ways to implement Conditional
          Rendering in React.
        </h1>
        <button>Logout</button>;
      </div>
    );
  } else {
    return (
      <div className="App">
        <h1>
          This is a Demo showing several ways to implement Conditional
          Rendering in React.
        </h1>
        <button>Login</button>
      </div>
    );
  }
}
...

雖然上述代碼將實作相同的結果，但使得組件不必要的臃腫，同時由于不斷重新渲染一個不變的組件而導致性能問題，

2. 使用元素變數

元素變數是上述的將條件渲染提取到函式中的一個擴展，元素變數只是保存JSX元素的變數，因此，我們可以在JSX外部根據條件將元素/組件賦值給這些變數，僅在JSX渲染變數即可，

// index.js
...
render() {
  let { isLoggedIn } = this.state;
  let AuthButton;
  if (isLoggedIn) {
    AuthButton = <button>Logout</button>;
  } else {
    AuthButton = <button>Login</button>;
  }
  return (
    <div className="App">
      <h1>
        This is a Demo showing several ways to implement Conditional Rendering in React.
      </h1>
      {AuthButton}
    </div>
  );
}
...

注意我們如何有條件地將值（組件）分配給AuthButton，然后我們只需要在JSX中渲染它即可，

3. 使用switch陳述句

如前所示，我們可以使用if…else陳述句根據設定的條件從組件回傳不同的標簽，使用switch陳述句也可以達到相同的效果，在該陳述句中我們可以為不同的條件指定標簽，看看如下代碼：

// AuthButton.js
import React from "react";

const AuthButton = props => {
  let { isLoggedIn } = props;
  switch (isLoggedIn) {
    case true:
      return <button>Logout</button>;
      break;
    case false:
      return <button>Login</button>;
      break;
    default:
      return null;
  }
};

export default AuthButton;

注意我們如何根據isLoggedIn的值回傳不同的按鈕，當存在兩個以上可能的值或結果時，采用此方法更為合理，你也可以通過break陳述句取消，正如return陳述句自動終止執行一樣，

注意：從組件回傳null會使它隱藏自身/不顯示任何內容，這是切換組件可見性的好方法，

4. 三元運算子

如果你熟悉三元運算子，那么你應該知道這是撰寫if陳述句的一種更簡潔的方法，因此我們也許會這樣寫：

// index.js
...
render() {
  let { isLoggedIn } = this.state;
  return (
    <div className="App">
      <h1>
        This is a Demo showing several ways to implement Conditional Rendering
        in React.
      </h1>
      {isLoggedIn ? <button>Logout</button> : <button>Login</button>}
    </div>
  );
}
...

但在上例中，這種方法會使組件臃腫，笨重和難以理解，你可以將條件封裝在純函陣列件中，如下所示：

// AuthButton.js
import React from "react";

const AuthButton = props => {
  let { isLoggedIn } = props;
  return isLoggedIn ? <button>Logout</button> : <button>Login</button>;
};

export default AuthButton;

5. 邏輯運算子&&

短路運算是一種用于確保在運算式運算程序中沒有副作用的技術，邏輯&&幫助我們指定僅在一種情況下執行，否則將被完全忽略，這對于僅在特定條件為真時才需要執行的情況下是很有用的，

例如，如果是登錄狀態，我們只需顯示Logout按鈕，否則我們什么也不做，如下：

// index.js
...
render() {
  let { isLoggedIn } = this.state;
  return (
    <div className="App">
      <h1>
        This is a Demo showing several ways to implement Conditional Rendering
        in React.
      </h1>
      {isLoggedIn && <button>Logout</button>}
    </div>
  );
}
...

如果isLoggedIn為true，則將顯示Logout按鈕，否則將不顯示任何內容，我們用相同方法就可以實作最終結果，如下所示，

// index.js
...
return (
  <div className="App">
    <h1>
      This is a Demo showing several ways to implement Conditional Rendering
      in React.
    </h1>
    {isLoggedIn && <button>Logout</button>}
    {!isLoggedIn && <button>Login</button>}
  </div>
);
...

這是基于isLoggedIn的值渲染正確的按鈕，但是，不建議這樣做，因為有更好、更清潔的方法可以達到相同的效果，而且，一旦組件稍大一些，這很容易使你代碼看起來混亂和難以理解，

6. 使用立即呼叫函式運算式（IIFE）

還記的剛才說的JSX局限性嗎，在其中無法執行所有JavaScript代碼，嗯...這并不完全正確的，因為有很多方法可以繞過這種行為，一種方法是使用IIFE，

(function () {
  statements
})();

點擊鏈接了解更多

通過這種技術，我們能夠直接在JSX內撰寫條件邏輯，但將其包裝在匿名函式中，該匿名函式在運行該部分代碼后立即被呼叫，請參見下面的示例：

//index.js
...
render() {
  let { isLoggedIn } = this.state;
  return (
    <div className="App">
      <h1>
        This is a Demo showing several ways to implement Conditional Rendering
        in React.
      </h1>
      {(function() {
        if (isLoggedIn) {
          return <button>Logout</button>;
        } else {
          return <button>Login</button>;
        }
      })()}
    </div>
  );
}
...

也可以使用箭頭功能，通過更加簡潔的方式撰寫該代碼，如下所示：

// index.js
...
return (
  <div className="App">
    <h1>
      This is a Demo showing several ways to implement Conditional Rendering in React.
    </h1>
    {(()=> {
      if (isLoggedIn) {
        return <button>Logout</button>;
      } else {
        return <button>Login</button>;
      }
    })()}
  </div>
);
...

7. 使用增強的JSX

某些庫公開了擴展JSX的功能，因此可以直接用JSX實作條件渲染，此類別庫之一是JSX Control Statements，它是Babel插件，可在編譯程序中將類似組件的控制陳述句轉換為JavaScript對應的陳述句，請參閱下面的示例以了解如何實作，

// index.js
...
return (
  <div className="App">
    <h1>
      This is a Demo showing several ways to implement Conditional Rendering in React.
    </h1>
    <Choose>
      <When condition={isLoggedIn}>
         <button>Logout</button>;
      </When>
      <When condition={!isLoggedIn}>
         <button>Login</button>;
      </When>
    </Choose>
  </div>
);
...

但是，不建議使用這種方法，因為您撰寫的代碼最侄訓轉換為常規JavaScript條件，僅僅撰寫JavaScript可能總比對如此瑣碎的事情增加額外的依賴要好，

性能問題

作為通用規則，最好確保在實作條件渲染時：

• 請勿隨意更改組件的位置，以防止不必要地卸卸和多載組件，
• 僅更改與條件渲染有關的標簽，而不改變組件中沒有變動的部分，
• 不要在render方法中使組件不必要的臃腫，從而導致組件延遲渲染，

總結

我們已經成功研究了在React中實作條件渲染的7種方法，每種方法都有其自身的優勢，選擇哪種方法主要取決于實際情況，要考慮的事項包括：

• 條件渲染標簽的大小
• 可能結果的數目
• 哪個會更直觀和可讀

通常，我建議：

• 當只有一個預期的結果時，使用邏輯&&運算子非常方便，
• 對于布爾型情況或只有兩個可能結果的用例，可以使用if…else，Element變數，三元運算子和IIFE，
• 如果結果超過2個，則可以使用Switch陳述句，提取成函式或提取成純函陣列件，

但是，這些僅是建議，最侄訓是根據實際情況選擇，

標籤：其他

上一篇：echart的legend不顯示問題

下一篇：2020年值得你去試試的10個React開發工具