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

最新推荐文章于 2023-04-18 20:05:46 发布
最新推荐文章于 2023-04-18 20:05:46 发布
阅读量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前后端同构防止重复渲染
08-28
在这个过程中，React会遍历所有组件，执行构造函数（对于ES6类组件）以及每个组件的render()方法，最终构建出一个虚拟DOM树。当这个树被转换为实际的DOM并插入到页面中，组件的componentDidMount()方法会被调用，...
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 2108
react中的循环遍历，以及判断的写法
html5 函数遍历,react中类组件、函数组件、state、单层遍历、多层遍历、先遍历后渲染、if-else、三目运算符...
weixin_32300003的博客
06-16 315
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 954
函数组件、类组件
【React】循环渲染组件
AcongMiss的博客
03-31 2784
class InputGroup extends React.Component { state = { fileList: [{ name: 'xxx.png', status: 'done', }], }; render() { const { fileList } = this.state; const inputPil...
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基础03--render渲染、组件生命周期、组件通信
脚步不能达到的地方，眼光可以达到；眼光不能达到的地方，精神可以飞到
01-02 765
react基础03--render渲染、组件生命周期、组件通信1 介绍2 方法&案例2.1 render 方法2.2 state 状态更新2.3 生命周期函数2.4 组件通信3 注意事项4 说明 1 介绍 react基础02–基础函数&自定义函数组件&属性 中介绍了组件基础函数、自定义函数组件的方法，以及如何设置组件属性。本文在其基础上继续介绍，render渲染、组件生命周期函数、组件通信等常用的方法概念，并配以实际案例。 2 方法&案例 2.1 render 方法 vim
React 条件渲染组件
且听风吟的博客
04-18 700
React 条件渲染组件
react函数组件性能优化-避免不必要的重新渲染
qq_45228255的博客
04-13 1835
纯组件-浅层对比 对于引用类型来说：只比较对象的引用（地址）是否相同 例如： const obj = { number: 0 } const newObj = obj newObj.number = 2 console.log(newObj === obj) // true 所以PureComponent内部比较： 最新的state.obj === 上一次的state.obj ，如果为true，就不重新渲染组件 注意： 不要直接修改源数据，错误做法： state = { obj: { .
react学习之渲染数据
独特的人
12-06 1123
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 2953
React循环遍历渲染数组对象
react遍历指定数量的数据
weixin_47763287的博客
03-08 1259
1、用map方法和slice方法遍历指定的数据数量 1）可以先用slice方法截取n个元素。 students.slice(0, 10); 2）再用map方法对截取到的数据进行遍历。 students.slice(0, 10).map();
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、付费专栏及课程。

余额充值