在 React 组件中，都是返回单一的节点。但是有时候，我们需要在组件中返回多个节点，但是又不想增加额外的结构，这时候就需要用到 React 中的 Fragment。本文将为大家介绍 Fragment 的作用及使用示例。
Fragment 简介
Fragment 是 React 16 新增的一项功能，它可以让组件返回多个节点，而不必创建多余的 DOM 元素。使用 Fragment 的目的是为了让代码更简洁、清晰，同时提高性能。
在 React 中，使用 Fragment 不必引入任何新的 API，只需要在组件返回多个节点时使用 <React.Fragment> 或者 <fragment> 包裹多个节点即可。
Fragment 的作用
使用 Fragment 有以下几方面的好处：
简洁：使用 Fragment 可以让代码更加简洁、易读。使用 Fragment 时，可以不创建多余的 DOM 元素，从而使代码更加精简。
高效：使用 Fragment 可以避免不必要的 DOM 元素的数量，减轻 DOM 操作的负担，使渲染更加高效。
灵活性：使用 Fragment 可以让组件返回多个节点，提高了组件的灵活性。
使用示例
下面是一个简单的示例，演示如何使用 Fragment。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------ -
------ -
----------
-------------
-------------
-----------
--
-以上代码使用了 Fragment，让组件返回了多个节点。如果不使用 Fragment，代码可能会写成这样：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------ -
------ -
-----
-------------
-------------
------
--
-以上代码会多创建一个无意义的 div 元素，使用 Fragment 可以避免这种情况的发生。
总结
Fragment 是 React 16 新增的一种功能，它可以让组件返回多个节点，同时不创建多余的 DOM 元素，从而使代码更加简洁、高效、灵活。在使用 React 开发过程中，我们可以适当地使用 Fragment，提高代码的可读性和性能。
以上就是本文对于 React 中 Fragment 的作用及使用示例的详细介绍。相信对于学习和使用 React 的开发者们，一定会有一定的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475ccbc968c7c53b02ce065