React 条件渲染与列表渲染

条件渲染

render 函数返回 null 不渲染

在 React 组件的render函数中,如果返回null,则不会进行任何渲染。例如:

class Tip extends React.Component {
  render() {
    const { showTip } = this.props;

    if (!showTip) {
      // 如果render函数返回null,不会进行任何渲染
      return null;
    }

    return <p>这是一个提示!!!</p>;
  }
}

使用逻辑运算符控制渲染

在 JSX 中,可以使用&&逻辑与运算符、三目运算符? :或if语句来有条件地渲染组件。

例如,使用&&运算符:

const UserGreeting = <h1>欢迎回来!</h1>;
const GuestGreeting = <h1>请先注册。</h1>;

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn && UserGreeting}
      {!isLoggedIn && GuestGreeting}
    </div>
  );
}

使用三目运算符:

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 ? <h2>你有 {unreadMessages.length} 条未读消息。</h2> : <h2>没有未读消息。</h2>}
    </div>
  );
}

列表渲染

在 React 中,通常使用map()函数对数组进行遍历,将数据渲染为一个列表。

class UserList extends React.Component {
  state = {
    users: [
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
      { id: 3, name: '王五' },
    ],
  };

  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
          </tr>
        </thead>
        <tbody>
          {this.state.users.map((user) => (
            <tr key={user.id}>
              <td>{user.id}</td>
              <td>{user.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

列表渲染注意事项

1. 对于静态的不可操作列表,可以使用数组索引index作为列表项的key,但并不推荐这样做。

2. 对于动态可操作的列表,要避免使用index作为key,因为列表项的增删或顺序改变会导致index对应的项发生变化,使得状态更新出现问题,查找性能变差。

3. 最佳实践是使用稳定唯一的 ID 作为列表项的key,比如使用数据项的 ID 字段,或者使用nanoid等库生成唯一 ID。

4. 组件中的key是一个特殊的保留属性,不会作为props传递给子组件。如果子组件需要使用key对应的值,需要显式地将其作为一个不同名称的 prop 传入。这是为了防止开发者在子组件逻辑中错误地修改key。

总之,在进行条件渲染和列表渲染时,要注意render函数的返回值、逻辑运算符的使用以及key的设置,这样才能正确高效地渲染动态的 UI 界面。