React之React.Fragments

 2018年11月09日 分类:React/前端设计  评论(0)  阅读(1186)

React 中常见模式是为一个组件返回多个元素。为了包裹多个元素你肯定写过很多的 div 和 span,进行不必要的嵌套,无形中增加了浏览器的渲染压力。

15版以前,render 函数的返回必须有一个根节点,否则报错,为满足这一原则我会使用一个没有任何样式的 div 包裹一下。

import React from 'react';

export default function () {
    return (
        <div>
            <div>一步 01</div>
            <div>一步 02</div>
            <div>一步 03</div>
            <div>一步 04</div>
        </div>
    );
}

react 16开始, render支持返回数组,知道这个特性的人不在少数。这一特性已经可以减少不必要节点嵌套,小伙伴们可以多多用起来。

import React from 'react';

export default function () {
    return [
        <div>一步 01</div>,
        <div>一步 02</div>,
        <div>一步 03</div>,
        <div>一步 04</div>
    ];
}

Fragments

什么?你不喜欢写数组,怎么不懒死呢~~。好在 React 16为我们提供了Fragments。
Fragments与Vue.js的<template>功能类似,可做不可见的包裹元素。

import React from 'react';

export default function () {
    return (
        <React.Fragment>
            <div>一步 01</div>
            <div>一步 02</div>
            <div>一步 03</div>
            <div>一步 04</div>
        </React.Fragment>
    );
}

Fragments简写形式<></>

简写形式<></>是不是很吊的样子,但目前有些前端工具支持的还不太好,用 create-react-app 创建的项目就不能通过编译。大家使用在线的编辑器体验一下吧。

import React from 'react';

export default function () {
    return (
        <>
            <div>一步 01</div>
            <div>一步 02</div>
            <div>一步 03</div>
            <div>一步 04</div>
        </>
    );
}
wechat_app
微信公众号:webapp_club
关注一下,或许能让你获得更多前端咨询信息。
加载中...
分享中心

评论 抢沙发

评论前必须登录


如果你觉得本站内容对你有所帮助,比如提升你对编程方面的认识,你可以通过上面的二维码请博主喝杯咖啡,安好。

WEB前端开发部落(公众号:webapp_club)

群列表

前端初级学习群:初级Web前端学习群(后期为支付入群)
PHP初级学习群:PHP(MySQL)学习交流群
QQ群仅作为相关领域讨论平台,均提供高质量问题交流,禁止闲聊,无法接受的朋友请勿加群!
进群需要通过这里获取进群码才能进群哦!