useRef详细总结

我心飞翔 分类:javascript

本文全方面介绍useRef,分别从什么是useRef、为什么使用useRef以及useRef三兄弟(指useRef、forwardRef以及useImperativeHandle)来讲解。本文所有示例

一、什么是useRef

const refContainer = useRef(initialValue);
 
  • 返回一个可变的ref对象,该对象只有个current属性,初始值为传入的参数(initialValue)。
  • 返回的ref对象在组件的整个生命周期内保持不变
  • 当更新current值时并不会re-render,这是与useState不同的地方
  • 更新useRef是side effect(副作用),所以一般写在useEffect或event handler里
  • useRef类似于类组件的this

简单示例

需求: 点击 button 的时候 选中文本框
实现:

import React, { MutableRefObject, useRef } from 'react'
const TextInputWithFocusButton: React.FC = () => {
   const inputEl: MutableRefObject<any> = useRef(null)
   const handleFocus = () => {
   	// `current` 指向已挂载到 DOM 上的文本输入元素
   	inputEl.current.focus()
   }
   return (
   	<p>
   		<input ref={inputEl} type="text" />
   		<button onClick={handleFocus}>Focus the input</button>
   	</p>
   )
}
export default TextInputWithFocusButton
 

通过ref获取组件内的DOM
小结: 通过useRef定义个inputEl变量,在input 元素上定义ref={inputEl},这样通过inputEl.current就可以获取到input Dom 元素,选中则调用下focus函数即可

见示例库里的domUseRef.tsx

二、为什么使用useRef

需求: 跨渲染取到状态值

只用useState:

实现:

import React, { useState } from "react";
const LikeButton: React.FC = () => {
	const [like, setLike] = useState(0)
	function handleAlertClick() {
		setTimeout(() => {
			alert(`you clicked on ${like}`) 
			//形成闭包,所以弹出来的是当时触发函数时的like值
		}, 3000)
	}
	return (
		<>
			<button onClick={() => setLike(like + 1)}>{like}赞</button>
			<button onClick={handleAlertClick}>Alert</button>
		</>
	)
}
export default LikeButton
 

现象
在like为6的时候, 点击 alert , 再继续增加like到10, 弹出的值为 6, 而非 10.
由于闭包,函数里的变量值为调用函数时对应的快照like值
为什么不是界面上like的实时状态?
当我们更改状态的时候,React会重新渲染组件,每次的渲染都会拿到独立的like值,并重新定义个handleAlertClick函数,每个handleAlertClick函数体里的like值也是它自己的,所以当like为6时,点击alert,触发了handleAlertClick,此时的like是6,哪怕后面继续更改like到10,但alert时的like已经定下来了。

小结:
不同渲染之间无法共享state状态值

见示例库里的likeButton

采用全局变量

在组件前定义一个类似 global 的变量
实现:

import React from 'react'
let like = 0
const LikeButton: React.FC = () => {
	function handleAlertClick() {
		setTimeout(() => {
			alert(`you clicked on ${like}`)
		}, 3000)
	}
	return (
		<>
			<button
				onClick={() => {
					like = ++like
				}}
			>
				{like}赞
			</button>
			<button onClick={handleAlertClick}>Alert</button>
		</>
	)
}
export default LikeButton
 

现象
在like为6的时候, 点击 alert , 再继续增加like到10, 弹出的值为10.
采用global变量
小结
由于like变量是定义在组件外,所以不同渲染间是可以共用该变量,所以3秒后获取的like值就是最新的like值
该示例同时也说明,非state变量不会引起重新render

代码见示例库里的globalFix1

采用useRef

实现:

import React, { useRef } from 'react'
const LikeButton: React.FC = () => {
	// 定义一个实例变量
	let like = useRef(0)
	function handleAlertClick() {
		setTimeout(() => {
			alert(`you clicked on ${like.current}`)
		}, 3000)
	}
	return (
		<>
			<button
				onClick={() => {
					like.current = like.current + 1
				}}
			>
				{like.current}赞
			</button>
			<button onClick={handleAlertClick}>Alert</button>
		</>
	)
}
export default LikeButton
 

现象
在like为6的时候, 点击 alert , 再继续增加like到10, 弹出的值为10.跟上面使用全局变量现象一致
采用useRef
小结
采用useRef,作为组件实例的变量,保证获取到的数据肯定是最新的。

该示例同时也说明,ref更改不会re-render

见示例库里的useRefFix2

useRef与全局变量的区别

上面两个法子都可以解决问题,那两个有什么区别呢
实现

import React, { useRef } from 'react'
// 定义一个全局变量
let like = 0
const LikeButton: React.FC = () => {
	let likeRef = useRef(0)
	function handleAlertClick() {
		setTimeout(() => {
			alert(`you clicked on ${like}`)
			alert(`you clicked on ${likeRef.current}`)
		}, 3000)
	}
	return (
		<p>
			<button
				onClick={() => {
					like = ++like
					likeRef.current = likeRef.current + 1
				}}
			>
				点赞
			</button>
			<button onClick={handleAlertClick}>Alert</button>
		</p>
	)
}
export default LikeButton
 

两种法子区别
现象
三个按钮依次点下,点击任意alert,最先弹出的是3(表示global变量取的最后渲染组件的值),后弹出1(表示ref属于组件自己,互相不影响)

小结

  • useRef 是定义在实例基础上的,如果代码中有多个相同的组件,每个组件的 ref 只跟组件本身有关,跟其他组件的 ref 没有关系。
  • 组件前定义的 global 变量,是属于全局的。如果代码中有多个相同的组件,那这个 global 变量在全局是同一个,他们会互相影响。

代码见示例库里的differenceFix1and2.tsx

三、useRef与createRef的区别

在一个组件的正常的生命周期中可以大致分为3个阶段:

  1. 从创建组件到挂载到DOM阶段。初始化props以及state, 根据state与props来构建DOM
  2. 组件依赖的props以及state状态发生变更,触发更新
  3. 销毁阶段

第一个阶段,useRef与createRef没有差别
第二个阶段,createRef每次都会返回个新的引用;而useRef不会随着组件的更新而重新创建
第三个阶段,两者都会销毁
实现:

import React, { useState, useRef, createRef } from 'react'
const RefDifference: React.FC = () => {
	let [renderIndex, setRenderIndex] = useState(1)
	let refFromUseRef = useRef<number>()
	let refFromCreateRef = createRef()
	console.info(refFromUseRef.current, 'refFromUseRef.current')
	console.info(refFromCreateRef.current, 'refFromCreateRef.current')
	if (!refFromUseRef.current) {
		refFromUseRef.current = renderIndex
	}

	if (!refFromCreateRef.current) {
		refFromCreateRef.current = renderIndex
	}
	return (
		<>
			<p>Current render index: {renderIndex}</p>
			<p>
				<b>refFromUseRef</b> value: {refFromUseRef.current}
			</p>
			<p>
				<b>refFromCreateRef</b> value:
				{refFromCreateRef.current}
			</p>

			<button onClick={() => setRenderIndex((prev) => prev + 1)}>
				Cause re-render
			</button>
		</>
	)
}
export default RefDifference
 

现象:
点击按钮时,从控制台可以看到refFromUseRef.current一直为1(因为refFromUseRef.current已经存在该引用),而refFromCreateRef.current却是undefined(因为createRef 每次渲染都会返回一个新的引用,所以if判断时为true,会被重新赋值,页面就会显示出新的值)
useRef与createRef
小结:
createRef 每次渲染都会返回一个新的引用,而 useRef 每次都会返回相同的引用

代码见示例库里的useRefAndCreateRef

以上讲的都是在当前组件使用ref的示例,后续接着说ref如何用在与子组件的交互上

四、获取子组件的属性或方法

需求: 调用子组件里的某个函数

自定义属性传入ref

实现:
父组件创建一个ref作为一个属性传入子组件。子组件根据内部方法的变化动态更改ref(useEffect)

import React, {
MutableRefObject,
useState,
useEffect,
useRef,
useCallback
} from 'react'
interface IProps {
//prettier-ignore
label: string,
cRef: MutableRefObject<any>
}
const ChildInput: React.FC<IProps> = (props) => {
const { label, cRef } = props
const [value, setValue] = useState('')
const handleChange = (e: any) => {
const value = e.target.value
setValue(value)
}
const getValue = useCallback(() => {
return value
}, [value])
useEffect(() => {
if (cRef && cRef.current) {
cRef.current.getValue = getValue
}
}, [getValue])
return (
<div>
<span>{label}:</span>
<input type="text" value={value} onChange={handleChange} />
</div>
)
}
const ParentCom: React.FC = (props: any) => {
const childRef: MutableRefObject<any> = useRef({})
const handleFocus = () => {
const node = childRef.current
alert(node.getValue())
}
return (
<div>
<ChildInput label={'名称'} cRef={childRef} />
<button onClick={handleFocus}>focus</button>
</div>
)
}
export default ParentCom

现象:
父组件按钮点击时,通过调用getValue,获取到子组件input里的value值
ref作为属性传入子组件
小结:
不够优雅,尤其是自定义一个属性传入ref

见示例库里的childComponentRef.tsx

通过useImperativeHandle,配合forwardRef

forwardRef: 将ref父类的ref作为参数传入函数式组件中
示例:

React.forwardRef((props, ref) => {})  //创建一个React组件,
//这个组件将会接受到父级传递的ref属性,
//可以将父组件创建的ref挂到子组件的某个dom元素上,
//在父组件通过该ref就能获取到该dom元素
const FancyButton = React.forwardRef((props, ref) => (  
<button ref={ref} className="FancyButton">    
{props.children}
</button>
));
// 可以直接获取到button的DOM节点
const ref = React.useRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

useImperativeHandle在函数式组件中,用于定义暴露给父组件的ref方法,用来限制子组件对外暴露的信息,只有useImperativeHandle第二个参数定义的属性跟方法可以在父组件能够获取到
主要作用:用于减少父组件中通过forward+useRef获取子组件DOM元素暴露的属性过多
为什么使用: 因为使用forward+useRef获取子函数式组件DOM时,获取到的dom属性暴露的太多了
解决: 使用uesImperativeHandle解决,在子函数式组件中定义父组件需要进行DOM操作,减少获取DOM暴露的属性过多

useImperativeHandle(ref, createHandle, [deps]) // 第一个参数暴露哪个ref;第二个参数暴露什么信息
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);
// 渲染 <FancyInput ref={inputRef} /> 的父组件
//可以调用 inputRef.current.focus()

实现:

import React, {
MutableRefObject,
useState,
useImperativeHandle,
useRef,
forwardRef,
useCallback
} from 'react'
interface IProps {
label: string
}
let ChildInput = forwardRef((props: IProps, ref: any) => {
const { label } = props
const [value, setValue] = useState('')
// 作用: 减少父组件获取的DOM元素属性,只暴露给父组件需要用到的DOM方法
// 参数1: 父组件传递的ref属性
// 参数2: 返回一个对象,父组件通过ref.current调用对象中方法
useImperativeHandle(ref, () => ({
getValue
}))
const handleChange = (e: any) => {
const value = e.target.value
setValue(value)
}
const getValue = useCallback(() => {
return value
}, [value])
return (
<div>
<span>{label}:</span>
<input type="text" value={value} onChange={handleChange} />
</div>
)
})
const ParentCom: React.FC = (props: any) => {
const childRef: MutableRefObject<any> = useRef({})
const handleFocus = () => {
const node = childRef.current
alert(node.getValue())
}
return (
<div>
<ChildInput label={'名称'} ref={childRef} />
<button onClick={handleFocus}>focus</button>
</div>
)
}
export default ParentCom

现象:

只往外暴露getValue
小结:
React 16.3版本之前,是不能够在函数组件里定义ref属性,因为函数组件没有实例。在16.3版本之后,引入了React.forwardRef,通过该函数就可以将父组件的ref传入子组件,子组件可以将该ref绑定在任何DOM元素上,但这样会将整个子组件暴露给父组件。通过useImperativeHandle就可以限制要将子组件里的哪些属性跟方法暴露给父组件

见示例库里的childComponentRef2

五、总结

  1. useRef可以用来定义变量,这些变量更改之后不会引起页面重新渲染,比如分页获取数据时,存储页码。
  2. useRef也可以用来区分初始渲染还是更新(通过current有没值,具体见示例库里的didOrUpdate.tsx)
  3. 在DOM节点上定义ref属性,通过.current就可以获取到该DOM元素
  4. 通过forwardRef就可以给函数子组件传入ref属性。
  5. 使用useImperativeHandle用于定义暴露给父组件的ref方法

回复

我来回复
  • 暂无回复内容