舞榭歌台,风流总被,雨打风吹去。
refs(类组件)
- refs 提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素。
- 在类组件中使用时,可以通过 createRef 来使用,每次渲染都会创建一个新的 ref 对象。
useRef(函数组件)
- useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 可变对象在组件的整个生命周期内持续存在且不变。
- 更新current 值不会render,和useState的区别。
useRef 使用
- 跨渲染获取状态
1 | import { Button, Modal } from 'antd'; |
- 更改状态的时候,React会重新渲染组件,每次的渲染都会拿到独立的count ,而点击触发alert 只能取当时的值,后面count 变化无法取得。
- 解决方案1 - 使用全局变量
1 | import { Button, Modal } from 'antd'; |
- 解决方案2 - 使用useRef
1 | import { Button, Modal } from 'antd'; |
useRef 和 全局变量的区别
- 使用全局变量也能实现 useRef 的功能
- seRef 是定义在实例基础上的,如果代码中有多个相同的组件,每个组件的 ref 只跟组件本身有关,跟其他组件的 ref 没有关系。
- 组件前定义的 global 变量,是属于全局的。如果代码中有多个相同的组件,那这个 global 变量在全局是同一个,他们会互相影响
useRef 和 createRef 的区别
- 组件生命周期
- 从创建组件到挂载到DOM阶段。初始化props以及state, 根据state与props来构建DOM。
- 组件依赖的props以及state状态发生变更,触发更新。
- 销毁阶段。
- 区别
- 第一个阶段,useRef与createRef没有差别
- 第二个阶段,createRef每次都会返回个新的引用;而useRef不会随着组件的更新而重新创建
- 第三个阶段,两者都会销毁
获取子组件的属性和方法
1 | import { Button,Form,Input } from 'antd'; |