列表组件

列表渲染

Keys

Keyed Fragment

在大部分情况下，我们可以使用key来标识列表中的元素，不过如果我们希望将多个子列表的顺序互换，就无法直接为某个列表添加key属性了，譬如下面这个函数式组件中：

function Swapper(props) {
  let children;
  if (props.swapped) {
  children = [props.rightChildren, props.leftChildren];
  } else {
  children = [props.leftChildren, props.rightChildren];
  }
  return <div>{children}</div>;
}

当我们修改该组件的swapped属性时，两个子列表中的元素都会先被卸载再被挂载，而理想环境下我们应该只是将这两个子列表交换下顺序就好了。简单粗暴的方式是我们为两个子列表各包裹一层div，然后为这两个div添加key属性，不过 React 提供了 Keyed Fragments 特性：

import createFragment from 'react-addons-create-fragment'


function Swapper(props) {
  let children;
  if (props.swapped) {
  children = createFragment({
  right: props.rightChildren,
  left: props.leftChildren
  });
  } else {
  children = createFragment({
  left: props.leftChildren,
  right: props.rightChildren
  });
  }
  return <div>{children}</div>;

}

在createFragment函数中传入的对象中的键会自动作为两个子列表的键使用，即 React 在进行渲染时会先判断是否有相同键的元素存在，如果存在则直接更改顺序，而不会经过卸载、挂载这相对繁杂的步骤。而createFragment函数的返回值则可以当做正常的对象进行使用，我们可以使用React.Children系列函数来对其进行操作。

React Canvas