Xlera8

Why we shouldn’t use in React JS

正如我们所知，我们通常使用 DIV 来制作容器或将多个元素包装在一个元素中，然后可以一次对它们应用样式。

在 React JSx 中，我们通常使用 div 将多个组件放入其中以作为单个组件返回。
正如你在下面看到的：

return (
<div> <Home /> <Main /> <Blogs /> <footer />
</div>
)

虽然，我们可以消除 DIV 并释放 DOM 中的一些额外空间。
这里有一些替代方案，我们可以使用这些替代方案来代替组件周围的 DIV。

React Js 版本 16.2，引入了一个新特性碎片概念。让我们更深入地研究一下。

现在 React Fragment 的工作方式与 DIV 完全相同，都是组件的包装器。
看这个例子：

return (
<React.Fragment> <Home /> <Main /> <Blogs /> <footer />
<React.Fragment />
)

或者我们可以使用 Fragment shothand 标签 (< > < />) 片段代替

这与

return (
<> <Home /> <Main /> <Blogs /> <footer />
< />
)

1.快速
正如我们所知，DIV 标签在 DOM 中创建一个节点并占用 DOM 中的一些空间，但是 React. 该片段不会在 DOM 中创建节点，因此不会占用 DOM 中的任何空间
这使得应用程序比平时快一点。

2. 更简洁的 DOM
当应用程序增长时，拥有许多不相关的节点会使代码变得混乱且难以阅读。因为我们可以有多个带有嵌套子组件的父组件，这会使我们的代码更加混乱，并成为以正确方式调试代码的障碍但是使用 Fragment，代码看起来更清晰，更易于理解和调试。

总结
在最新版本的 React 中使用 Fragment 将被认为是一个值得遵循的好习惯。大多数开发人员不会注意这样的小事情，这可能会在应用程序架构在未来增长时帮助破坏它。

除了没有例外的标准外，我们必须使用 DIV 来添加一些类并向其添加样式。

非常感谢您的支持。关注并与您的同事分享。
请继续关注即将发布的此类文章。

注意安全！保持开心！