Technicalarticles

5种在React中实现条件渲染的方法
作者：赵刘伟 时间：2020-05-28 浏览量：
随着现代Web应用程序的权重从后端转移到前端，我们被迫花更多时间思考性能优化。实施条件渲染时也是如此。

因此，尝试花费适当的时间优化代码，同时始终努力尽可能地重用组件。这将帮助你在质量和运输时间之间取得适当的平衡。
你可以尝试使用Bit.dev之类的组件中心来发布，记录和组织组件。这样，你的所有组件都可以在所有项目中重复使用。

1、 if-else

我们可以将if-else条件逻辑应用于React中的JSX。请记住，JSX在执行之前已经编译为JS，因此我们实际上是在用JS代码编写。
例如：


var globalVar = truefunction App() {    if(globalVar) {        return <div>If Rendering</div>    } else {        return <div>Else Rendering</div>    }}

性能

if-else语句可能会导致React重新渲染而浪费。在中小型应用程序中可能看不到它，但是在具有成百上千个组件的大型应用程序中，性能下降会非常明显。
让我们看一下以下示例：

render() {    if(props.showA) {        return (            <A />            <B />            <C />        )    }    return (        <B />        <C />    )}

根据条件安装组件A，B，C。
如果showA道具是真实的，则渲染A，B，C。如果showA道具为假，则跳过A并仅渲染B和C。
这里的问题来自React的差异算法。这个算法是React用来知道何时避免浪费渲染的算法。
最初showA为true时，组件将按照其结构A-> B-> C showA进行渲染。只要为true且其道具不变，React就不会重新渲染。
但是，渲染结构将在showA变为false 时发生变化。结构将是B->C。现在，React将看到与前一个结构不同的结构，并且将重新渲染（卸载和重新安装）B和C组件，即使它们的prop / state保持不变。并且不需要重新渲染。这是浪费的重新渲染。

2、三元运算符

三元运算符是“ if-else”条件的缩写。第一部分说明条件，第二部分则为返回值（如果为true），最后一部分为返回值（如果为false）。


condition ? true_cond : false_cond

例如：

let cond = truefunction App() {    return (        {cond ?             <div>If Rendering</div>            :            <div>Else Rendering</div>        }    )}

3、元素变量

元素变量包含JSX元素，因此可以在React组件中的任何地方使用。元素变量使您的代码更易于阅读和理解，因为它消除了组件中的多个return语句。
实施此操作的标准方法：

function App(props) {    if(props.loggedIn) {        return <div>Logged In</div>    } else {        return <div>Not Logged In</div>    }}

在上面的组件中，我们有多个return语句。我们在JSX中使用if-else来有条件地呈现部分UI。
我们可以使用元素变量来存储要在条件语句的每个结果上返回的元素。

例如：

function App(props) {    let element    if(props.loggedIn) {        element = <div>Logged In</div>    } else {        element = <div>Not Logged In</div>    }    return element}

根据if-else语句的求值，我们使用element变量保存要渲染的最后一个元素。
通过使用元素变量，使我们的代码更简洁易读。

性能

这里的问题与if-else以上项目中提到的问题相同。

4、AND运算子（&&）

AND运算符用于检查其左右表达式均正确。


left_expr && right_expr
如果表达式解析为true，则AND运算符将返回正确表达式的求值。
例如：

（true &&“ nnamdi”）//“ nnamdi”（true && 1234）// 1234

另一方面，如果表达式解析为false，则AND运算符将返回false：

(false && "nnamdi")// false(false && 1234)// false

如果是这种情况，我们可以使用此AND运算符在React中有条件地呈现JSX。

例如：

function App(props) {    return (        <div>            {                props.loggedIn &&                 <h3>You're logged in as {props.data.username}</h3>            }        </div>    )}

我们在JSX中使用AND运算符。花括号使我们能够在JSX中添加和评估JS表达式。

性能

尽管从本质上来说，它与前面两种条件渲染的方法没有什么不同，但是具有AND（&&）运算符的JSX表达式被认为是更好的选择，因为它迫使在有条件返回和渲染元素时返回相同的结构。

5、返回空值

我们可以将组件设置为返回null值而不是JSX表达式，以便对其进行评估但不呈现任何内容。
当组件返回null时，它将阻止React安装该组件。


function App(props) {    if(props.noRender)        return null
    return (        <div>App Component</div>    )}

如果设置了noRender属性，则此组件返回null。因此，如果我们不希望App组件渲染，则将设置noRender props <App noRender=true />。
请注意，无论如何，都会触发组件返回null的生命周期方法。

性能

如上所述，尽管返回的组件null将不会呈现任何内容，但仍将对其进行评估。这意味着不必要的计算可能会在大型应用程序中加起来相当重要。
英文 | https://blog.bitsrc.io/5-ways-to-implement-conditional-rendering-in-react-64730323b434


返回列表

想和你做个朋友

DO U LIKE?