介绍
在使用 React 开发 web 应用或组件时，我们经常使用一个或多个 div 等 HTML 元素来包括一段 JSX，用来构成我们的视图层。这样的做法虽然能够实现我们的需求但存在一些问题：
- 父子关系不清晰，增加了调试难度
- 父元素中嵌套的子元素结构不明确，难以区分每个子元素的作用
而 React 的 createFragment API 则能很好地解决这些问题。
react-addons-create-fragment 就是官方提供的 React createFragment 的插件包，本文将讲解这个 npm 包的使用方法和优缺点。
安装和使用
通过 npm 安装 react-addons-create-fragment：
npm install react-addons-create-fragment --save
createFragment 的使用方法很简单，只需要按照以下步骤即可：
- 首先在文件中引入
React.addons.createFragment方法：
import React from 'react'; import createFragment from 'react-addons-create-fragment';
- 通过使用
createFragment来创造你希望使用的 components
const fragment = createFragment({
firstComponent: <Foo/>,
secondComponent: <Bar/>
});
// 使用这个新的 fragment components 来向 components 树中添加子元素
<div>{fragment}</div>以上 createFragment 的使用方法很简洁明了，让开发者能够清晰地理解代码结构，不再出现父子关系不清晰、混乱的情况。
优缺点
createFragment 已经成为了 React 的一部分，是一个很便利的 API，可以让 React 开发者更好的掌控组件的层级和结构。
相对于使用安装版本的 React.createFragment，官方提供的 react-addons-create-fragment 能让我们更快地将新特性纳入到我们的项目中，并且实现了按需加载，减小了包体积。
需要注意的是，如果在项目中频繁使用 createFragment 会导致 HTML 结构过于复杂，不利于渲染速度。因此，尽可能使用更简单的 HTML 结构来实现组件视图。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------------------
----- ----- - -- -- -
-----------------
--
----- ------------ - -- -- -
------------------------------------
--
----- ------ - -- -- -
-----
-----------
---------------------------
------
--
----- --------- - -- -- -
-----
-----------
------------------------------
------
--
----- --------- - -- -- -
-----
------ --
------------- --
- ----------------
------- ------- ---
---------- ---------- --
---
------
--在 Lifestyle 组件中，我们使用 createFragment 来组织 Health 和 Happiness 两个子组件，避免了 HTML 结构过于混乱的情况，提高了代码的可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65882