从0学习React(7)

在上篇文章中,我们重点讲了关于函数组件的状态管理。这篇文章,我用一种新的方式来讲一讲React,我会通过一个函数来去讲React。当然,这肯定不能一个函数讲完,但是我可以讲很多个函数,一篇文章讲一个,很快,80%的React的语法知识基本就讲到了。

这个函数是这样的:

复制代码
const openDetail = () => {
  fetchMenuPermission({ path: '/device/deviceManage' }).then((res) => {
    const data = res.data;
    if (data && data.length > 0) {
      setPermissions(data);
      setShowDetail(true);
    } else {
      message.warn('没有设备管理权限');
    }
  });
};

代码解析

1. const openDetail = () => { ... };
  • 这是一个箭头函数(arrow function)的声明。
  • openDetail 是函数的名称。
  • ()是函数的参数,这个函数没有参数。
  • { ... }是函数体,即函数的内容。
2. fetchMenuPermission({ path: '/device/deviceManage' })
  • fetchMenuPermission 是一个函数,接受一个对象作为参数,这个对象包含一个 path 属性,其值为 '/device/deviceManage'
  • 假设 fetchMenuPermission 返回一个 Promise 对象。
3. .then((res) => { ... })
  • then 方法用于处理 fetchMenuPermission 返回的 Promise 对象。
  • 当 Promise 解析成功时,then 方法中的回调函数会被调用,res 是 Promise 解析后的结果。
4. const data = res.data;
  • res 对象中提取 data 属性,并将其赋值给常量 data
5. if (data && data.length > 0) { ... } else { ... }
  • 这是一个条件判断语句。
  • 检查 data 是否存在且其长度是否大于 0。
6. setPermissions(data);
  • 如果条件为真,调用 setPermissions 函数,并传入 data 作为参数。
  • 假设 setPermissions 是一个用于更新权限数据的状态更新函数。
7. setShowDetail(true);
  • 调用 setShowDetail 函数,并传入 true 作为参数。
  • 假设 setShowDetail 是一个用于更新是否显示详细信息的状态更新函数。
8. message.warn('没有设备管理权限');
  • 如果条件为假,调用 message.warn 方法,显示警告信息 '没有设备管理权限'
  • 假设 message 是一个用于显示消息的对象,warn 方法用于显示警告消息。

使用的语法和概念

1. 箭头函数(Arrow Function)
  • 箭头函数是一种简洁的函数定义方式,语法为 const functionName = (params) => { ... };

  • 在箭头函数中,this 关键字的行为与普通函数不同,它不会绑定自己的 this,而是继承自外层作用域。

    const openDetail = () => { ... };

2. 对象字面量(Object Literal)
  • 对象字面量用于创建对象,语法为 { key: value }

    fetchMenuPermission({ path: '/device/deviceManage' })

3. Promise 和 then 方法
  • Promise 是一种异步编程的解决方案,用于处理异步操作的结果。

  • then 方法用于在 Promise 解析成功时执行回调函数。

    fetchMenuPermission(...).then((res) => { ... });

4. 解构赋值(Destructuring Assignment)
  • 解构赋值用于从对象或数组中提取值,并赋值给变量。

    const data = res.data;

5. 条件语句(Conditional Statement)
  • 条件语句用于根据条件的真假执行不同的代码块。

    if (data && data.length > 0) { ... } else { ... }

6. 状态更新函数(State Update Function)
  • setPermissionssetShowDetail 假设是 React 的状态更新函数,用于更新组件的状态。

    setPermissions(data);
    setShowDetail(true);

相关推荐
zwjapple9 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
DKPT35 分钟前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说3 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
好好研究3 小时前
学习栈和队列的插入和删除操作
数据结构·学习
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器