尚硅谷react课程-day04

目录

1、回调形式的ref

2、回调ref中调用次数问题

3、受控组件

4、非受控组件

---

1、回调形式的ref

1、利用react提供的ref属性名通过回调函数的属性值去调用节点自身

(currentnode)=>{this.input1=currentnode}其中需要传递的参数为当前节点这个是reat提供的方法调用的函数并将节点传递过来作为实参

<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>

2、创建虚拟dom都是在类组件render方法中的那么我们利用ref获取过来的节点就能通过赋值挂载到类本身，然后对其属性值修改

2、回调ref中调用次数问题

只要页面setState值改变就会重新渲染页面，调用类组件render方法，但react中每一次渲染页面存在创建新实例清空refs值

 

[(32条消息) React] 核心属性refs—— 需要注意的问题_在全栈的路上打酱油的博客-CSDN博客

总结:组件内的标签可以定义ref属性来标识自己;尽量不用字符串形式的ref;createRef最为复杂但也是官方最推荐的

3、受控组件

表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件，表单元素的修改会实时映射到状态值上，此时就可以对输入的内容进行校验.必须要在表单上使用onChange事件来绑定对应的事件.

 

页面中所有输入类的dom随着用户的输入将数据实时保存到state状态里面去当我们需要使用state状态时就能直接调用出来

4、非受控组件

在虚拟DOM节点上声明一个ref属性去获取节点的value值，然后当表单提交完成就能直接调用submit函数获取到输入框的值并且弹框输出表单值，其更像是传统的HTML表单元素，数据存储在DOM中，而不是组件内部，获取数据的方式是通过ref引用