React Fragment的作用和用法是什么-群英

React Fragment的作用和用法是什��

Admin 2022-07-06 群英技术资��

在这篇文章中，我们来学习一下“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

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容��

下一篇：TypeScript遍历对象属性报错怎么办，如何处理
上一篇：JS中修改body的样式怎么操作，写法是什��