当前位置: 首页 > article >正文

【React】React 基础

1. 搭建环境

npx create-react-app react-basic-demo

2. 基本使用

JSX 中使用 {} 识别 JavaScript 中的表达式,比如变量、函数调用、方法调用等。

if、switch、变量声明等属于语句,不是表达式。

列表渲染使用 map 。

image.png

事件绑定用;on + 事件名称 = { 事件处理函数/程序 }

小驼峰命名法

image.png
事件回调函数中可传形参 e 是该事件。

image.png
传递自定义参数时,事件绑定的位置改为箭头函数的写法。

image.png

image.png

3. 组件

React 中,一个组件就是一个首字母大写的函数。

image.png

4. useState

useState 向组件中添加状态变量

image.png
状态是只读的,不可以直接修改

image.png
对于对象类型的状态变量,应该传递一个新的对象来更改

image.png

5. 修改样式

image.png

可以使用 classnames 这个库方便进行 动态控制 class 类名

image.png

6. 获取 DOM

image.png

7. 组件通信

8. useEffect

useEffect 在组件中创建由渲染本身引起的操作(如发送 Ajax 请求,更改 DOM 等),即非用户操作。

useEffect(() => {}, [])

副作用函数随着依赖项的触发而执行。

image.png
清理副作用一般在组件卸载时执行

useEffect(() =>{
  // 实现副作用逻辑
  return ()=> {
  // 清除副作用逻辑
  }
}, [] )

9. React Hooks


http://www.kler.cn/a/135549.html

相关文章:

  • web——sqliabs靶场——第二关
  • SQL(2)
  • 基于SpringBoot和Vue的公司文档管理系统设计与开发(源码+定制+开发)
  • 大语言模型LLMs在医学领域的最新进展总结
  • Vue功能菜单的异步加载、动态渲染
  • DolphinDB 与南方科技大学联合授课啦!
  • 基础算法:高精度加法
  • C语言之深入指针及qsort函数(五)(详解介绍)
  • 微信小程序内嵌h5页面,实现动态设置顶部标题的功能
  • ArkTS - HarmonyOS服务卡片(创建)
  • CISP模拟试题(一)
  • uniapp+vue+Springboot 公司网站0~1搭建 前端前期设计篇
  • 串行通信中的同步方式(Synchronous)与异步方式(Asynchronous)stty -F设置波特率
  • “移动机器人课程群实践创新的困境与突围”素材
  • 动态页面调研及设计方案
  • 【Java 进阶篇】Ajax 实现——原生JS方式
  • 文件传输客户端 SecureFX mac中文版支持多种协议
  • 归并排序详解:递归实现+非递归实现(图文详解+代码)
  • 设计模式-组合模式-笔记
  • 应试教育导致学生迷信标准答案惯性导致思维僵化-移动机器人
  • Android描边外框stroke边线、rotate旋转、circle圆形图的简洁通用方案,基于Glide与ShapeableImageView,Kotlin
  • 【双指针】快乐数
  • Wireshark TS | 应用传输缓慢问题
  • 【运维篇】Redis 性能测试工具实践
  • 米家竞品分析
  • OceanBase 4.2.1 LTS 发版 | 一体化数据库首个长期支持版本