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)

相关推荐
PYB313 小时前
【Web·JS·基础】函数的使用和展运算符...objs
前端·javascript
默_笙14 小时前
🚥 给 RAG 装一台心电监护仪:LangSmith 全链路观测(上)
前端·javascript
变与不变80615 小时前
js同步和异步难点重点详解
开发语言·javascript·ecmascript
Dovis(誓平步青云)16 小时前
多个链接不等于多份证据,新闻核验看板怎样合并来源
java·服务器·前端·javascript·人工智能·pdf·电脑
Dovis(誓平步青云)16 小时前
几个方案来回选不定?做一个随时切换的候选推荐页
android·java·服务器·开发语言·javascript·数据库·智能化
可乐鸡翅yeah_18 小时前
fmp4 碎片 MP4 格式 HLS 流,和传统 TS 分片有什么不一样
开发语言·javascript·ios·音视频·safari·m3u8·m3u8在线播放
ss27319 小时前
AI全栈实战 | 2.3-01 组件库实战:Element Plus 怎么搭出专业界面,过度封装为什么成维护负担
前端·javascript·elementui·vue
福兮说19 小时前
URL 编码的七个坑:c++ 传到后端变空格、%25 套娃、截断 emoji 直接报错
开发语言·前端·javascript·node.js·url
小的时候可菜了19 小时前
JS 异步的本质:从单线程到 thenable(一条进化链)
开发语言·前端·javascript
可乐鸡翅yeah_19 小时前
hls.js 配置 loadStartPosition,点播起始播放位置踩坑
开发语言·javascript·网络协议·ecmascript·m3u8在线