【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

相关推荐
-孤存-3 分钟前
Spring Bean作用域与生命周期全解析
java·开发语言·前端
QEasyCloud202213 分钟前
WooCommerce 独立站系统集成技术方案
java·前端·数据库
小宋102123 分钟前
从 Kafka 告警到前端实时可见:SSE 在故障诊断平台中的一次完整落地实践
java·前端·kafka
jerrywus26 分钟前
告别手动调试!用 Flutter MCP 让 AI 直接操控你的 App
前端·claude·mcp
浮桥36 分钟前
uniapp + h5实现悬浮活动按钮组件
前端·javascript·uni-app
Web_Lys37 分钟前
css设置滚动条样式不生效【antDesign UI Table滚动条样式无法自定义 解决方案】
前端·css
a11177638 分钟前
星球浏览 漫游(纯html 开源)
前端·开源·html
郝学胜-神的一滴44 分钟前
FastAPI:Python 高性能 Web 框架的优雅之选
开发语言·前端·数据结构·python·算法·fastapi
慧一居士1 小时前
vite 使用说明和示例演示
前端
牢七1 小时前
反序列化重点模块 private Object readOrdinaryObject(boolean unshared)废案与反思
java·服务器·前端