React 条件渲染 ​

在 React 中，条件渲染是一种根据特定条件决定是否渲染组件或组件的一部分的技术。条件渲染使我们能够根据不同的状态或数据来展示不同的内容，从而实现动态和交互性的用户界面。

什么是条件渲染？ ​

条件渲染是指根据特定条件来决定是否渲染组件或组件的一部分。在 React 中，我们可以使用 JavaScript 的条件语句（如 if、else、switch）或三元表达式来实现条件渲染。条件渲染允许我们根据不同的条件来显示或隐藏组件，或者根据不同的状态来渲染不同的内容。

React 中的条件渲染是一种基本且常用的技术，它使我们能够根据用户的交互或应用程序的状态来实现动态的用户界面。通过条件渲染，我们可以根据不同的条件显示不同的组件，或者在特定条件下渲染特定的内容，从而提供更加个性化和灵活的用户体验。

使用 if...else 实现条件渲染 ​

在 React 中，我们可以使用 JavaScript 的 if...else 语句来实现条件渲染。下面是一个简单的示例，演示了如何根据条件来渲染不同的内容：

import React from 'react'

class ConditionalRendering extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoggedIn: false
    }
  }

  render() {
    const { isLoggedIn } = this.state

    if (isLoggedIn) {
      return <p>Welcome, User!</p>
    } else {
      return <p>Please log in to continue.</p>
    }
  }
}

export default ConditionalRendering

在上面的例子中，我们通过 isLoggedIn 状态来控制是否渲染欢迎消息。如果用户已登录，则渲染欢迎消息 "Welcome, User!"；否则，渲染提示信息 "Please log in to continue."。根据 isLoggedIn 状态的不同，组件会根据条件渲染不同的内容。

使用三元表达式实现条件渲染 ​

除了使用 if...else，我们还可以使用 JavaScript 的三元表达式（ternary operator）来实现条件渲染。三元表达式是一种简洁的写法，用于在一行代码中根据条件返回不同的值。下面是一个使用三元表达式的示例：

import React from 'react'

class ConditionalRendering extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoggedIn: false
    }
  }

  render() {
    const { isLoggedIn } = this.state

    return isLoggedIn ? <p>Welcome, User!</p> : <p>Please log in to continue.</p>
  }
}

export default ConditionalRendering

在上面的例子中，我们使用三元表达式来根据 isLoggedIn 状态的值来返回不同的 JSX 元素。如果 isLoggedIn 为 true，则返回 <p>Welcome, User!</p>；否则，返回 <p>Please log in to continue.</p>。通过使用三元表达式，我们可以在一行代码中实现条件渲染，使代码更加简洁和易读。

使用逻辑与（&&）实现条件渲染 ​

除了 if...else 和三元表达式，我们还可以使用逻辑与（&&）来实现条件渲染。逻辑与在 JavaScript 中是一种短路逻辑，当第一个条件为真时，会返回第二个条件；否则，返回第一个条件的值。我们可以利用这个特性来实现条件渲染。下面是一个使用逻辑与的示例：

import React from 'react'

class ConditionalRendering extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoggedIn: false
    }
  }

  render() {
    const { isLoggedIn } = this.state

    return isLoggedIn && <p>Welcome, User!</p>
  }
}

export default ConditionalRendering

在上面的例子中，我们使用逻辑与来根据 isLoggedIn 状态的值来决

定是否渲染欢迎消息。如果 isLoggedIn 为 true，则返回 <p>Welcome, User!</p>；否则，返回 false。由于逻辑与是短路逻辑，当 isLoggedIn 为 false 时，不会继续执行后面的代码，因此不会渲染任何内容。

使用条件运算符实现条件渲染 ​

除了上述方法，我们还可以使用条件运算符（也称为逻辑或 nullish coalescing 运算符）来实现条件渲染。条件运算符是 ES2020 中的新特性，用于简化条件判断。下面是一个使用条件运算符的示例：

import React from 'react'

class ConditionalRendering extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoggedIn: false
    }
  }

  render() {
    const { isLoggedIn } = this.state

    return isLoggedIn ?? <p>Please log in to continue.</p>
  }
}

export default ConditionalRendering

在上面的例子中，我们使用条件运算符来根据 isLoggedIn 状态的值来决定是否渲染提示信息。如果 isLoggedIn 为 true，则返回 isLoggedIn 的值；否则，返回 <p>Please log in to continue.</p>。条件运算符简化了条件渲染的写法，使代码更加简洁和易读。

条件渲染的最佳实践 ​

1. 使用适合场景的条件渲染方法：根据具体的场景和需求选择合适的条件渲染方法，例如使用 if...else、三元表达式、逻辑与、条件运算符等。

2. 抽象逻辑：如果条件渲染逻辑较复杂，建议将其抽象成函数或组件，以提高代码的可读性和复用性。

3. 使用默认值：在条件渲染中，可能会遇到变量未定义或为空的情况。为了避免出现错误，可以使用默认值来处理这些情况。

4. 避免嵌套过深：在条件渲染时，尽量避免嵌套过深的代码结构，以免影响代码的可读性和性能。

5. 使用 Fragment 包裹多个元素：当需要在条件渲染中返回多个元素时，可以使用 Fragment 来包裹这些元素，以避免额外的 DOM 节点。

6. 使用 key 属性：在条件渲染中，如果返回的元素列表可能会发生变化，建议为每个元素提供唯一的 key 属性，以帮助 React 正确地更新 DOM。