列表组件

返回目录

列表组件

列表渲染

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