useRef 与 createRef 区别

const ref = useRef(initialValue);
<input ref={ref} />

useRef

• useRef返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( initialValue )；
• 返回的 ref 对象在组件的整个生命周期内保持不变，除非手动修改；
• 当更新 current 值时并不会 re-render ，这是与 useState 不同的地方；
• useRef也可以用来区分初始渲染还是更新(通过current有没值)；

useRef 与 createRef 区别

1. useRef是use hooks的一种，一般用于function组件，而createRef一般用于class组件；
2. 由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 获取子组件的属性或方法