【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

相关推荐
Jackson__3 分钟前
AI Agent 的能力从哪里来?一文讲清后训练、上下文学习和外部能力
前端·agent·ai编程
默_笙10 分钟前
🎉 AI 项目里为什么需要 BFF?因为我实在不想在前端处理二进制流
前端·javascript
Revolution6110 分钟前
改一个订单筛选,为什么要在六个目录里来回找,前端项目目录到底要怎么拆
前端·前端工程化
阳光是sunny23 分钟前
LangGraph高级教程:Multi Schema多状态管理详解
前端·人工智能·后端
mCell1 小时前
从 TodoList 到 Microsoft To Do:全栈工程师到底要管什么?
前端·编程语言·全栈
阳光是sunny2 小时前
LangGraph实战教程:状态管理与`graph.invoke`入参深度解析
前端·人工智能·后端
神奇小汤圆2 小时前
深入解析 Flink Kafka Connector:原理、配置与最佳实践
前端·后端
科技之门2 小时前
百公里管网漏损分级定位实战方案2026
前端·人工智能·算法
xyphf_和派孔明2 小时前
企业级微前端项目完整创建步骤,第三步:配置 Vue 子应用
前端·javascript
自强的小白2 小时前
条件查询或查询全部时时前端请求数据等时间格式
前端