React技巧2(避免无意义的父节点)
时间:2022-05-08
本文章向大家介绍React技巧2(避免无意义的父节点),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1.React 技巧1(状态组件与无状态组件的使用) ----2018.01.04
2.React 技巧2(避免无意义的父节点)----2018.01.05
3.React 技巧3(如何优雅的渲染一个List)----2018.01.06
4.React 技巧4(如何处理List里面的Item)----2018.01.07
5.React 技巧5(TodoList实现)----2018.01.08
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
我们在开发的时候经常会遇到这样的情况?
比如说,我把
<i className="bd_logo1"/>
这是{this.props.title}
把这两行代码分开,分别放到两个 div.top 里
<div className="top">
</div>
<div className="top">
<i className="bd_logo1"/>
</div>
<div className="top">
这是{this.props.title}
</div>
然后我想把这块代码,做成组件!
新建 SecondsTop.jsx组件
直接把代码放进来,会报错,我们必须把他放到一个标签里.
比如再给它们放到一个div父标签中!
import React from 'react';
const SecondsTop = ({title}) =>
<div>
<div className="top">
<i className="bd_logo1"/>
</div>
<div className="top">
这是{title}
</div>
</div>
;
export default SecondsTop;
我们在Seconds.jsx 引入 SecondsTop.jsx 组件
再浏览器中查看!
你会发现多了一层,无意义的div父标签!毫无意义,还影响性能(很小)
那我们如何避免呢!
改造下SecondsTop.jsx 组件,直接返回一个数组
import React from 'react';
const SecondsTop = ({title}) => [
<div className="top">
<i className="bd_logo1"/>
</div>,
<div className="top">
这是{title}
</div>
];
export default SecondsTop;
再看下浏览器
那个无意义的div父标签,就不需要了!
但是浏览器会报错!
我们只需要给他加上KEY即可,再次改造!
import React from 'react';
const SecondsTop = ({title}) => [
<div className="top" key="top1">
<i className="bd_logo1"/>
</div>,
<div className="top" key="top2">
这是{title}
</div>
];
export default SecondsTop;
再看下浏览器
一切正常,OK!
在开发中经常会遇到,大家要灵活应用,该写法藐视再react16以上版本中才有!
- 干货 | 进化策略入门:最优化问题的另一种视角
- 【Golang语言社区】Golang语言面试题
- PHP面向对象核心(一)——序列化与魔术方法
- PHP面向对象核心(二)——继承、多态、接口
- PHP面向对象核心(三)——反射、异常处理
- 理解jquery的$.extend & $.fn.extend用法
- PHP数据结构(一)——顺序结构线性表
- PHP数据结构(二)——链式结构线性表
- 微信小程序防止重复点击,该如何处理?
- CSS常用实例,web前端开发者不知道这些就太low了
- PHP数据结构(三)——运用栈实现括号匹配
- python抓取头条文章
- PHP数据结构(四) ——队列
- CSS实现多列复杂界面布局
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 低成本个人建站系列二 —— 使用 Hexo+GitHub 搭建个人免费博客
- 42图揭秘,「后端技术学些啥」
- R-ggTimeSeries | ggplot2: 热力日历图
- R-wordcloud: 词云图
- 直播APP源码是如何实现音视频同步的
- 动态规划算法练习(5)--medium
- phpstudy漏洞分析原因到修复
- 哈?命令注入外带数据的姿势还可以这么骚?
- 记一次曲折的RCE挖掘
- pytest文档49-命令行参数--tb的使用
- pytest文档50-命令行参数--durations统计用例运行时间
- pytest文档51-内置fixture之cache使用
- pytest文档53-命令行实时输出错误信息(pytest-instafail)
- pytest文档52-命令行参数--setup-show查看fixture的执行过程
- pytest文档54-Hooks函数terminal打印测试结果(pytest_report_teststatus)