细读 React Fragment

Posted 2023-03-22

参考技术A

React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

假设我们要使用 React 组件渲染以下这段真实 DOM 节点。

要怎么做呢？很简单，谁都知道...

React.Fragment 是在 React 16.2 新增的新特性，旧版本并不支持。下面我们从几个方面，说明 Fragment 的好处。

在低于 React 16.0 的版本，类组件或函数组件有很多限制。

比如，它们必须返回 React 元素 或 null 。其中 React 元素包括类似 <MyComponent /> 等自定义组件、类似 <div /> 等 DOM 节点元素。

正确示例：

错误示例：

类组件同理。当不正确使用时，将会报错：

这种方案的缺点也是显而易见的，在组件的返回值上，总需要一层 <div>、<span> 或其他 DOM 节点包装起来。当 React 渲染成真实 DOM 时，这个包装节点总是会存在的。

很多时候，往往这个包装节点对我们的 UI 层是没有意义的，反而加深了 DOM 树的层次。但很无奈，谁让我们要用 React 呢，人家语法限制就那样...

除了原来的 React 元素和 null 之外，新增了几种类型：

例如：

相比 React 15.x 及更早版本，这种方式实在是太棒了。除了支持更多类型，最重要的是不会增加额外的节点。

前面提到，React 15.x 里的 React 组件总是避免不了需要一层可能是“无谓”的节点节点进行包装，那么 React 16.0 的改进，可以解决如下场景：

问题示例：

根据 W3C 的要求，一个合法的 <table> ， <tr> 的子元素必须是 <td> 。而 React 这种组件的写法直接破坏了 <table> 结构，最终也得不到我们的预期结果。

如果按照 React 16.x 提供的新特性，可以轻松解决...

自 React 16.2 起，开始支持 React.Fragment 语法。前面提到该特性是对数组形式的一种增强用法。

它的语法非常简单，把它是 React 内置的一个 React 组件。

key 是唯一可以传递给 Fragment 的属性。将来可能会添加对其他属性的支持，例如事件处理程序。

也可以使用它的简写语法 <></> ，但这种写法不接受任意属性，包括 key 。

回到文章开头的示例，要渲染这样一段真实 DOM 节点。

前面提到，可以有几种解决方案，各有利弊。

解决方法一

低于 React 16.0 版本，由于不支持 Fragment 和数组形式，唯一的方法是将它们包装在一个额外的元素中，通常是 div 或 span 。如下：

但上述这种方法有个缺点，在渲染成真实 DOM 的时候，会增加一个节点，比如上述的 <div /> 。

解决方法二

自 React 16.0 起，支持数组形式。因此可以这么做：

这种方式有点麻烦，我们对比一下 Fragment 形式。

解决方法三（推荐）

自 React 16.2 起，支持 React.Fragment 语法，因此我们可以这样使用。

仔细对比数组和 Fragment 形式，可以发现数组形式有以下缺点：

以上这些限制 Fragment 统统都没有，我们就按正常的思维去编写 DOM 节点就好了。

react中Fragment组件

什么是Fragment？在我们定义组件的时候return里最外层包裹的div往往不想渲染到页面，那么就要用到我们的Fragment组件了，具体使用如下：

import React, { Component, Fragment } from ‘react‘;
class TodoList extends Component {
    render(){
        return(
         <Fragment>
            <div><input /><button>提交</button></div>
            <ul>
                <li>学习react<li/>
                <li>Learning React</li>
            </ul>
         <Fragment/>
        )
    }
}
export default TodoList