React学习之扩展键片段(三十一)

前端之家收集整理的这篇文章主要介绍了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

猜你在找的React相关文章