React学习之扩展键片段（三十一）

import createFragment from 'react-addons-create-fragment' // ES6
var createFragment = require('react-addons-create-fragment') // ES5 with npm
var createFragment = React.addons.createFragment; // ES5 with react-with-addons.js

1.概述

大多数情况下，你可以使用key属性来优化渲染的组件，但是在下面的情境下就会有点问题了：

如果你有两个孩子集合需要渲染，在没有包容父元素的情况下，就没法用一个key去标识两个孩子集合，或者说你不想一个个key去标识每一个子孩子，我希望像对待单个孩子一样的对待多个孩子，那么key Fragment就是你的选择

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

上面这个代码因为没有为两个孩子设置key，从而导致当父亲属性发生变化时，会直接导致子元素移除，然后重装载，性能下降。

为了解决这种问题你就可以创建一个key Fragment来给孩子集合增加key。

Array<ReactNode> createFragment(object children)

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>;
}

上述的代码就会避免DOM卸载再重装载，React会识别出他们只是顺序发生了变化。

下一篇将讲React中的不变Helpers