React踩坑

1、图片引入路径

在react中img的src不能采用<img src="../../images/xxxxx.png" />这类方式直接使用相对路径,因为最后渲染时,这个路径实际上是用变量的样子代替,所以在标签里面用{}包裹。

正确写法:

import luohudongtai from "../../images/luohudongtai.png";

<img src= {luohudongtai} />

2、表单双向绑定

react实现了对Form.Item下的自定义组件自动注入value属性和onChange事件;子组件可以直接通过props调取使用

3、其他组件双向绑定

react的input、select等组件中没有数据双向绑定,可利用useState + value + onChange事件实现

4、子组件向父组件传值

1)通过父组件传递到子组件的方法向父组件传递值

5、useRef使用场景

1)如果我们只是想保存状态不影响视图更新,而且可以同步更新(useState是异步更新)&获取我们的状态,那么就使用 useRef(可以用全局的变量代替,注意命名)

2)用于操作Dom元素,取某个组件的原生事件,如主动调用input的click事件

变量是决定视图图层渲染的变量,请使用useState,其他用途useRef

6、Redux库

需要回调通知state (等同于回调参数) -> action( action是纯声明式的数据结构,只提供事件的所有要素,不提供逻辑)

需要根据回调处理 (等同于父级方法) -> reducer(是一个匹配函数,action的发送是全局的:所有的reducer都可以捕捉到并匹配与自己相关与否,相关就拿走action中 的要素进行逻辑处理,修改store中的状态,不相关就不对state做处理原样返回)

需要state (等同于总状态) -> store(负责存储状态并可以被react api回调,发布action)

相关推荐
我是Superman丶17 分钟前
Antigravity Retry 自动重试脚本
前端·javascript·vue.js
im_AMBER34 分钟前
Leetcode 162 除了自身以外数组的乘积 | 接雨水
开发语言·javascript·数据结构·算法·leetcode
Komorebi_99991 小时前
前端开发|18 个高频易错知识点汇总(HTML+CSS+JS+Vue)面试 & 开发通用
javascript·css·html
Wenzar_2 小时前
# D3.js实战进阶:从基础图表到交互式数据仪表盘的全流程构建在现代前端开发中,**数据可视化已成为提升用户体验的核心能力之一
java·javascript·python·信息可视化·ux
菜鸟小码2 小时前
MapReduce 编程模型详解:Mapper、Reducer、Driver 三大核心组件
大数据·javascript·mapreduce
朝阳392 小时前
react【实战】首页 -- 响应式导航栏(含带联动动画的搜索框)
前端·react.js·前端框架
Ruihong2 小时前
手写 React 对比 VuReact 编译:真正省下来的是维护成本
vue.js·react.js·面试
林恒smileZAZ2 小时前
CSS 滚动驱动动画(scroll-timeline):无 JS 实现滚动特效
前端·javascript·css
LIO2 小时前
React Router 极简指南(v6+)
前端·react.js
懒人村杂货铺3 小时前
Express + TypeScript 后端通用标准规范
javascript·typescript·express