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）