什么是 render-fragment?
render-fragment是一个小型的React组件库，允许使用React 16.0及更高版本的用户创建和使用无多余的组件包装器。
安装和使用
使用npm包管理器安装render-fragment：
$ npm install render-fragment
在React项目中使用render-fragment：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ------------------
-------- ------- -
------ -
----------
---------------
---------------
-----------
--
-在这个例子中，我们使用react包的一种称为Fragment的接口来代替用div或span包装组件。我们还需要导入Fragment称为我们的符号（如果这是没有分配给其他名称）。
使用场景
通常，您可以通过创建一个新的或重复使用现有的组件来在React项目中重新使用代码。有时这是有意义的，但有时您可能只想要一些DOM元素输出，而不想将这些元素放在一个新组件中。
对于这种情况，React 16.0引入了Fragment接口。Fragment可以支持将多个组件渲染成单个输出，而无需使用包装器来创建额外的DOM元素。
示例代码
以下示例代码演示了如何使用render-fragment和Fragment接口。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ------------------
-------- ------- -
------ -
----------
---------------
---------------
-----------
--
-
深度解析
使用React 16.0及以上版本后，React组件中可以使用的Fragment接口。React组件需要一个根元素，而使用Fragment可以避免创建包裹元素。
另一个使用场景是默认情况下无法为元素分配key属性。<Fragment>可以定义一个带有key属性的DOM元素，以解决这个问题。
使用<Fragment>时，您甚至可以省略它的标签。
示例代码
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------- -
------ -
--
---------------
---------------
---
--
-
<>和</>之间的代码将被转换为<React.Fragment>和</React.Fragment>,它让人感觉更简洁。
结论
render-fragment使React开发更加简单，更容易了解其逻辑，无需在组件之间重新包装多余的包装器。在React项目中使用render-fragment，可以更加高效地开发代码，并大大减少代码量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac64b5cbfe1ea0610a09