const ref = useRef(initialValue);
<input ref={ref} />
useRef
- useRef返回一个可变的 ref 对象,该对象只有个 current 属性,初始值为传入的参数( initialValue );
- 返回的 ref 对象在组件的整个生命周期内保持不变,除非手动修改;
- 当更新 current 值时并不会 re-render ,这是与 useState 不同的地方;
- useRef也可以用来区分初始渲染还是更新(通过current有没值);
useRef 与 createRef 区别
- useRef是use hooks的一种,一般用于function组件,而createRef一般用于class组件;
- 由useRef创建的ref对象在组件的整个生命周期内都不会改变,但是由createRef创建的ref对象,组件每更新一次,ref对象就会被重新创建。
import React, {useRef,useState} from 'react'
export default function Fcom() {
const [, setChange] = useState();
const valRef = useRef(80);
return (
<div>
//不管你怎么点击按钮,value的值都会是80,并不会发生变化,这是因为ref对象的改变,并不会触发页面的更新setChange({})更新页面
{valRef.current}
<button onClick={() => {valRef.current += 1;setChange({})}}>+</button>
</div>
)
}
2:ref对象可以用于保存数据
3 获取子组件的属性或方法