React Fragment介绍与使用详解

前言

在向 DOM 树批量添加元素时，一个好的实践是创建一个document.createDocumentFragment，先将元素批量添加到
DocumentFragment 上，再把 DocumentFragment 添加到 DOM 树，减少了 DOM操作次数的同时也不会创建一个新元素。

和 DocumentFragment 类似，React 也存在 Fragment 的概念，用途很类似。在 React 16之前，Fragment 的创建是通过扩展包 react-addons-create-fragment 创建，而 React 16 中则通过<React.Fragment></React.Fragment> 直接创建 ‘Fragment'。

Fragments出现动机

一种常见模式是组件返回一个子元素列表。以此 React 代码片段为例：

class Table extends React.Component {  render() {    return (      <table>        <tr>          <Columns />        </tr>      </table>    );  }}

< Columns /> 需要返回多个 元素以使渲染的 HTML 有效。如果在 < Columns /> 的 render() 中使用了父 div，则生成的 HTML 将无效。

class Columns extends React.Component {  render() {    return (      <div>        <td>Hello</td>        <td>World</td>      </div>    );  }}

得到一个 < Table /> 输出：

<table>  <tr>    <div>      <td>Hello</td>      <td>World</td>    </div>  </tr></table>

Fragments 由此出现解决了这个问题。

React Fragment介绍与使用

React.Fragment 组件能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素。一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

理解起来就是在我们定义组件的时候return里最外层包裹的div往往不想渲染到页面，那么就要用到我们的Fragment组件了。就和vue的<template ></ template >.

render() {  return (    <React.Fragment>      Some text.      <h2>A heading</h2>    </React.Fragment>  );}

你也可以使用其简写语法 <></>。

render() {  return (    <>      Some text.      <h2>A heading</h2>    </>  );}

另外react 16开始， render支持返回数组，知道这个特性的人不在少数。这一特性已经可以减少不必要节点嵌套。

import React from 'react';export default function () {    return [        <div>1</div>,        <div>2</div>,        <div>3</div>    ];}

<React.Fragment> 与 <>区别

<></> 语法不能接受键值或属性，<React.Fragment>可以。

使用显式 <React.Fragment> 语法声明的片段可能具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子，创建一个描述列表：

function Glossary(props) {  return (    <dl>      {props.items.map(item => (        // 没有`key`，React 会发出一个关键警告        <React.Fragment key={item.id}>          <dt>{item.term}</dt>          <dd>{item.description}</dd>        </React.Fragment>      ))}    </dl>  );}

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

注意：简写形式<></>，但目前有些前端工具支持的还不太好，用 create-react-app 创建的项目可能就不能通过编译。所以遇到这种情况很正常。

到此这篇关于React Fragment介绍与使用详解的文章就介绍到这了,更多相关React Fragment内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！