react 学习总结 | 函数式组件中必知必会的条件渲染和遍历渲染

最新推荐文章于 2023-01-05 11:07:21 发布
最新推荐文章于 2023-01-05 11:07:21 发布
阅读量4.6k 收藏 8
点赞数 1
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CVSvsvsvsvs/article/details/93421092
版权

在 React 中，常常会遇到各种数据驱动组件渲染的情况。不同的数据表示不同的组件状态，我们需要根据应用的不同状态，只渲染对应状态下的组件内容，这就是所谓的条件渲染。

在个人近期的项目经验中主要遇到以下几种常见的 react jsx 在内联条件渲染，主要包括以下三种：

  1. 与运算符&&实现元素是否需要渲染；
  2. 三目运算符 ？ 实现if-else条件渲染；
  3. 返回null 实现阻止条件渲染。

以及最常用的使用map来进行遍历循环渲染。

借本文做一个小总结，分享一些个人经验给大家。

&& 运算符实现元素渲染

我们在jsx元素标签中，通常可以使用 && 来判断元素是否需要渲染。

简洁来讲，表达式就是像这样， value && <html />。 如果 value 为 true，那么<html/> 标签就会被渲染，若为false，则不被渲染；

以下结合一个超级简单的例子来说明以下这种渲染方式。

function demo () {
   
  const [show, setShow] = useState(true)
  const hidden = ()=> {
   
    setShow(false);  // 不显示组件
  } 

  return (
  	<div>
        <button onClick={
   hidden}>隐藏以下文字</button>
        {
   
          show &&
最低0.47元/天 解锁文章
qyhyzard
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 函数创建和渲染
m0_56195392的博客
05-10 787
import React from "react" //函数组建的创建和渲染 //创建 // 1.组件名称必须首字母大写，react内部会根据这个来判断是否是组件还是普通的HTML标签 //2.函数组件必须有返回值，表示UI结构，如果不需要渲染的话，可以返回null //3.组件就像HTML标签，可以被渲染到页面上，对于函数组件来说，渲染的内容是返回的值 //4.使用函数名称作为组件标签名称，在页面上使用时，就是使用函数名称 //如何获取事件对象e? //只需要在函数组件中传入参数e就可以获取事件对象..
react中的循环遍历，以及判断的写法
weixin_48952990的博客
08-21 2111
react中的循环遍历，以及判断的写法
html5 函数遍历,react中类组件、函数组件、state、单层遍历、多层遍历、先遍历后渲染、if-else、三目运算符...
weixin_32300003的博客
06-16 316
1、回顾module.exports = {entry: {},output: {},plugins: [],module: {},resolve: {},devServe: {}}2、react2.1 复制相关文件index.html / .babelrc / package.json / webpack.config.js删除vue相关文件2.2 创建day02/src,修改webpack的入...
React 函数组件和类组件的区别、渲染机制
weixin_69497729的博客
11-25 956
函数组件、类组件
react函数组件性能优化-避免不必要的重新渲染
qq_45228255的博客
04-13 1838
纯组件-浅层对比 对于引用类型来说：只比较对象的引用（地址）是否相同 例如： const obj = { number: 0 } const newObj = obj newObj.number = 2 console.log(newObj === obj) // true 所以PureComponent内部比较： 最新的state.obj === 上一次的state.obj ，如果为true，就不重新渲染组件 注意： 不要直接修改源数据，错误做法： state = { obj: { .
浅谈React前后端同构防止重复渲染
08-28
在这个过程中，React会遍历所有组件，执行构造函数（对于ES6类组件）以及每个组件的render()方法，最终构建出一个虚拟DOM树。当这个树被转换为实际的DOM并插入到页面中，组件的componentDidMount()方法会被调用，...
sharing-react-render-props:使用渲染道具重用组件逻辑
05-17
总结来说，渲染道具是React中一种强大的代码复用策略，它允许我们将组件的行为或逻辑封装在函数中，然后通过道具传递给其他组件。这种模式特别适用于需要共享数据处理、状态管理或副作用处理的场景。通过掌握渲染...
03 React 创建组件、绑定属性( 绑定class 绑定style)、引入图片 循环数组渲染数据
最新发布
03-01
在React开发中，创建组件...在实际项目中，你可能还会遇到状态管理、事件处理、条件渲染等其他重要概念，但这些基础已经为你打下了坚实的基础。通过不断地实践和学习，你将能够更加熟练地驾驭React这一强大的前端框架。
reactdelayedlist延迟列表渲染React组件
08-11
`react-delayed-list`就是这样一款组件，它专门用于延迟列表渲染，旨在提高大型数据集的加载速度和用户体验。这款组件采用虚拟化技术，只渲染当前可视区域的数据，从而减少DOM节点的数量，提升页面性能。 1. **延迟...
react-reactvalues一组微小的可组合的React组件用于处理渲染props的状态
08-14
3. **ValueList**: 这个组件用来存储一个列表的值，提供了便利的方法来添加、删除和遍历列表中的项。 4. **ValueDict**: 类似于`ValueList`，但用于存储键值对。它可以方便地处理对象数据结构。 5. **Handle**: 这...
react学习之渲染数据
独特的人
12-06 1127
react在 JSX 渲染数据
react项目中的组件编写，和数据循环
蜗牛的博客
09-20 2574
1.还是之前项目的同一个页面，同一个模拟数据 2.在页面当中我们写一个ui组件，通过 datas={this.props.data}这种方式往下传递数据； 3.具体来看一下ui组件：里面用map方法循环数据，循环的是一个lists组件 4.再来看一下lists组件：每个li及div上有一个onclick函数，通过层级关系依次往上传递； 5.最后，你会发现，其实调用
Vue组件通信有哪些方式？
weixin_43912756的博客
09-02 438
参考：vue通信、传值的多种方式（详细） Vue组件通信中eventBus的使用 vue通信及组件之间传值 1、通过路由带参数进行传值 两个组件 A和B,A组件通过query把orderId传递给B组件：this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B 在B组件中获取A组件传递过来的参数：this.$route.query.orderId 2、通过设置 Session Storage缓存的形式进行传递
在 React 中实现条件渲染的七种方法
热门推荐
a77582581234的博客
05-24 1万+
条件渲染方式 一、if 语句 先从 React 最基本的条件类型来看。如果有数据就显示组件，如果没有数据就不显示任何内容。posts 为需要渲染的列表： export default function App() { const { posts } = usePosts(); if (!posts) return null; return ( <div> <PostList posts={posts} /> </div&g..
React循环遍历渲染数组对象
m0_61672533的博客
01-05 2956
React循环遍历渲染数组对象
React中函数组件和类组件解决无效渲染
m0_59345890的博客
10-13 1886
组件是构成React视图的一个基本单元。有些组件会有自己本地的状态(state), 当它们的值由于用户的操作而发生改变时，组件就会重新渲染。在一个React应用中，一个组件可能会被频繁地进行渲染。这些渲染虽然有一小部分是必须的，不过大多数都是无用的，它们的存在会大大降低我们应用的性能。即简单理解为，无效渲染就是一些状态值的改变我们没有必要也发生渲染，例如我们程序中设置的值前后相等的，但是执行了setState后还是会发生渲染，render函数即会被调用。
react遍历指定数量的数据
weixin_47763287的博客
03-08 1259
1、用map方法和slice方法遍历指定的数据数量 1）可以先用slice方法截取n个元素。 students.slice(0, 10); 2）再用map方法对截取到的数据进行遍历。 students.slice(0, 10).map();
React基础—条件渲染
梦否
05-27 650
文章目录1. 条件渲染2. 分类2.1 普通函数组件中的条件渲染2.2 类组件中使用变量来替换2.3 使用&&运算符2.4 使用三目运算符 1. 条件渲染 在React中有多种方式可以用于实现条件渲染，以根据状态置来显示不同的UI界面，下面分别对其进行介绍。 2. 分类 2.1 普通函数组件中的条件渲染 函数组件天然有利于编写js语句，可以很方便的用于返回所需的UI界面，比如下面的案例： // 函数组件，条件返回 function Message(props) { if (props
react中遍历对象的方法
07-27
在React中遍历对象有多种方法，以下是其中几种常见的方法： 1. 使用Object.keys()方法和map()方法： ```jsx const obj = { key1: '...这些方法可以根据你的需求选择其中一种来遍历对象并在React组件中渲染相应的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值