React条件渲染列表渲染

一、React条件渲染

某些情况下，界面的内容会根据不同的情况显示不同的内容，或者决定是否渲染某部分内容：

在vue中，我们会通过指令来控制：比如v-if、v-show；
在React中，所有的条件判断都和普通的JavaScript代码一致；

常见的条件渲染的方式有哪些呢？
方式一：条件判断语句

适合逻辑较多的情况

方式二：三元运算符

适合逻辑比较简单

方式三：与运算符&&

适合如果条件成立，渲染某一个组件；如果条件不成立，什么内容也不渲染；

方式四：v-show的效果

主要是控制display属性是否为none

二、React列表渲染

真实开发中我们会从服务器请求到大量的数据，数据会以列表的形式存储：

比如歌曲、歌手、排行榜列表的数据；

比如商品、购物车、评论列表的数据；

比如好友消息、动态、联系人列表的数据；

在React中并没有像Vue模块语法中的v-for指令，而且需要我们通过JavaScript代码的方式组织数据，转成JSX：

很多从Vue转型到React的同学非常不习惯，认为Vue的方式更加的简洁明了；
但是React中的JSX正是因为和JavaScript无缝的衔接，让它可以更加的灵活；
另外我经常会提到React是真正可以提高我们编写代码能力的一种方式；

如何展示列表呢？
在React中，展示列表最多的方式就是使用数组的map高阶函数；
很多时候我们在展示一个数组中的数据之前，需要先对它进行一些处理：

比如过滤掉一些内容：filter函数
比如截取数组中的一部分内容：slice函数

React条件渲染列表渲染相关推荐

[react] react怎么提高列表渲染的性能？
[react] react怎么提高列表渲染的性能? 使用webpack 做代码分割. 使用hooks. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
【Vue】基础（三）条件渲染 - 列表渲染(key的作用与原理虚拟DOM解析) - 收集表单数据 - 持续更新中
目录 11. 条件渲染 11.1 v-if 11.2 v-show 12. 列表渲染 12.1 v-for(基本列表使用) 12.2 key的作用与原理真实DOM和其解析流程虚拟 DOM 的好处 ...
React 第八章列表渲染以及key的使用
在页面中list是较为常见的一种页面展示方式,在React中我们可以通过数组map函数以及其他循环语句实现jsx数组在页面组件的大括号{}中进行展示. 1,将数组进行循环展示如下,使用Array.m ...
react把表格渲染好ui_react 入坑笔记（五） - 条件渲染和列表渲染
条件渲染和列表渲染一.条件渲染条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
React（二）：jsx事件绑定、条件渲染、列表渲染、jsx的本质、购物车案例
React(二) 一.jsx事件绑定 1.this的绑定方式 2.jsx中绑定this的三种方式 3.事件对象和传参 (1)事件对象怎么传 (2)其他参数怎么传? 二.条件渲染 1.直接if-else ...
vue学习笔记（二）- 数据绑定、列表渲染、条件判断
vue的数据绑定和列表渲染的造轮子 GitHub:八至作者:狐狸家的鱼双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面页面->数据适用:input.select. ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
angular条件渲染、列表渲染、属性绑定、样式绑定、事件绑定
文章目录属性绑定样式绑定绑定单一样式绑定多个样式用 NgStyle 设置内联样式类绑定绑定单个类样式绑定到多个 CSS 类用 NgClass 添加和删除类条件渲染列表渲染 *ng ...
微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...

React条件渲染列表渲染

一、React条件渲染

二、React列表渲染

React条件渲染列表渲染相关推荐

最新文章

热门文章