【React】React 基础

1. 搭建环境

复制代码
npx create-react-app react-basic-demo

2. 基本使用

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

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

列表渲染使用 map 。

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

小驼峰命名法

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

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

3. 组件

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

4. useState

useState 向组件中添加状态变量

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

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

5. 修改样式

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

6. 获取 DOM

7. 组件通信

8. useEffect

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

复制代码
useEffect(() => {}, [])

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

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

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

9. React Hooks

相关推荐
鶴哥只手遮天1 分钟前
jQuery 4.0 源码架构与工程实践-第 10 章 尺寸、几何与显隐
前端·javascript·jquery
Mia_墨黎2 分钟前
2026 Windows 11 终端美化完全指南
前端·后端
用户18806874935221 分钟前
戴着 Rokid 接成语:用 AIUI 做一局有提示、有复盘的“接着说”
前端
Sakura_j_h_31 分钟前
Three.js 单文件离线机械臂工作台:爆炸图、透明外壳与剖面
前端·机械臂·webgl·three.js·1024程序员节·esbuild
计算机魔术师2 小时前
管谷歌的不是Pichai一个人,是一整层AI智能体
前端
米米商聊2 小时前
图标能点,按钮就可用了吗?键盘、名称与收藏状态
前端·javascript
Younglina3 小时前
三个晚上,我和 WorkBuddy 做了个生图网站
前端·后端·ai编程
xy34533 小时前
Axure 9.0 内联框架加载方式
前端·ui·html·axure·原型·产品设计
陈随易4 小时前
副业搞钱点子之收入查看器
前端·后端
Profile排查笔记4 小时前
浏览器指纹逆向怎么分析:从网络请求追踪到 JavaScript 采集链
前端·人工智能·后端·自动化