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

【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.lryc.cn/news/236843.html

相关文章:

  • CentOS7 设置 nacos 开机启动
  • 使用低代码可视化开发平台快速搭建应用
  • 数据分析思维与模型:多维度拆解分析法
  • Goby 漏洞发布|大华智慧园区综合管理平台 poi 文件上传漏洞
  • 视频修复软件 Aiseesoft Video Repair mac中文版功能
  • 企业spark案例 —— 出租车轨迹分析(Python)
  • SQL Server - 使用 Merge 语句实现表数据之间的对比同步
  • 【Web】Flask|Jinja2 SSTI
  • SPDK NVMe-oF target多路功能介绍
  • ADAudit Plus:助力企业安全的权威选择
  • sqli-labs关卡18(基于http头部报错盲注)通关思路
  • uni-app顶部导航栏背景色如何设置,微信小程序返回键设置
  • 基于多种设计模式重构代码(工厂、模板、策略)
  • boomYouth
  • 关于这个“这是B站目前讲的最好的【Transformer实战】教程!“视频的目前可以运行的源代码GPU版本
  • STM32定时器输入捕获测量高电平时间
  • 开源WIFI继电器之硬件电路
  • 远程执行ssh脚本
  • excel导入 Easy Excel
  • html实现图片裁剪处理(附源码)
  • 前端语言报错
  • 详细讲解什么是观察者模式
  • 镭速,克服UDP传输缺点的百倍提速传输软件工具
  • Semi-Supervised Multi-Modal Learning with Balanced Spectral Decomposition
  • 3296:【例50.2】 计算书费《信息学奥赛一本通编程启蒙(C++版)》
  • 统一身份认证平台之SSO建设
  • 【开题报告】基于SpringBoot的膳食营养健康网站的设计与实现
  • 超五类网线和六类网线的相同点和区别
  • Linux--初识和基本的指令(1)
  • 万宾科技智能井盖传感器,提升市政井盖健康