【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

相关推荐
光影少年9 分钟前
Vue的响应式原理?Vue2和Vue3有什么区别?
前端·vue.js·掘金·金石计划
孟祥_成都17 分钟前
Cursor 要被淘汰了?开发者最应该关注的 10 个信号
前端·人工智能
cxxcode25 分钟前
Sentry browserTracingIntegration 实现原理深度解析
前端
孟沐28 分钟前
大白话理解 Java 序列化:对标前端 JSON.stringify/parse
前端
忘ci32 分钟前
electron、edge.js调用C#动态链接库的一些问题
前端
yannick_liu34 分钟前
推荐一个可以在vue2中格式化json数据的插件
前端
可视之道35 分钟前
Canvas 渲染引擎性能优化实战:从 15 FPS 到 55 FPS
前端
小猪努力学前端1 小时前
基于PixiJS的试玩广告开发-续篇
前端·javascript·游戏
bluceli2 小时前
前端构建工具深度解析:从Webpack到Vite的演进之路
前端
wuhen_n2 小时前
v-model 的进阶用法:搞定复杂的父子组件数据通信
前端·javascript·vue.js