React文档:条件和列表渲染

一.条件渲染

可以像JavaScript中一样使用if...else渲染页面,也可以使用三目运算符

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  // 条件渲染组件
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

二.列表渲染

1.列表的语法

除了map方法,还可以使用JavaScript的其他循环方法

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

2.列表的key

key的使用根本原因在React的虚拟DOM, React需要知道哪些列表元素发生了改变,需要修改变化了的那个元素,而不是全部修改掉,以此来保证最小的性能消耗.

所以需要保证key的唯一性

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);