React起手-列表渲染

organicduck 发布于2月前 阅读1424次
0 条评论

列表渲染也很简单,利用map方法返回一个新的渲染列表即可,例如:

const numbers = [1, 2, 3, 4, 5];  
const listItems = numbers.map((number) =>  
  <li>{number}</li>
);
ReactDOM.render(  
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

基础列表组件的构造中,有一个重要的属性值key需要你进行指定,这个很重要,和帮助框架进行性能优化有关,具体深入原因后续会继续了解,先来看例子:

function NumberList(props) {  
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];  
ReactDOM.render(  
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

需要注意的是key的指定需要是其值是唯一的,因为它能帮助框架更好的识别列的改变,添加和删除,如果有稳定的唯一键值就使用唯一键值,如果没有可以使用index来进行标识,但是不提倡在列表会进行频繁排序的时候使用index,因为这样会使得性能下降。例如:

const todoItems = todos.map((todo) =>  
  <li key={todo.id}>
    {todo.text}
  </li>
);
const todoItems = todos.map((todo, index) =>  
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

出来以上用map构造好列表外,map的语法还可以内嵌到jsx语法中,只要加上{}即可,写法多种多样,可以选一种自己顺眼的哦,呵呵哒。例如以下两种写法是一样滴:

function NumberList(props) {  
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

function NumberList(props) {  
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}

查看原文:React起手-列表渲染

共收到0条回复

需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。