【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

相关推荐
William_Xu27 分钟前
React 新旧生命周期对比
前端
PBitW1 小时前
为什么vite中TS报错,可以继续运行?Webpack不行?💡
前端·typescript
GISer_Jing1 小时前
一套H5跑通三端:App+小程序内嵌H5跨端适配全栈解决方案
前端·前端框架·ai编程
码云之上1 小时前
项目团队从 5 人扩到 15 人,我写了个 CLI 让 IDE 共享 AI 规则
前端·人工智能·后端
飞天狗1 小时前
LCP / INP / CLS 三个维度的实战调优:把 Web Vitals 从不及格拉到优秀的完整路径
前端·性能优化
Csvn2 小时前
Vue 3 `<script setup>` 解构 props 后响应式丢了?一个「字段不更新」的排查实录
前端
用户298698530142 小时前
前端 Excel 处理进阶:React 中合并与取消合并单元格的实现
前端·javascript·react.js
Highcharts2 小时前
@highcharts/react完整技术指南|新版Highcharts React使用、迁移、SSR、TS 优化全解
前端·javascript
老王以为2 小时前
Fiber 节点 —— 一个数据结构如何承载整个 React 运行时
前端·react native·react.js