React ref的使用示例
写了一段时间的 react，99%都在写 state、prop、useState、useEffect，对 ref 特别不熟悉，前几天做一个需求，想用 ref 实现父组件捞子组件的某个状态值，结果失败了，特此整理一下 ref 相关内容。
什么是 ref
官网介绍：
在典型的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的 props 来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例，也可能是一个 DOM 元素。对于这两种情况，React 都提供了解决办法，即使用 ref 来获取 dom 或组件实例。
如何使用 ref
放在 dom 元素上
这是 ref 最直接的用法
export class Demo extends React.Component {
constructor(props) {
super(props)
this.myRef = createRef()
}
componentDidMount() {
console.log(this.myRef)
}
render() {
return <div ref={this.myRef}>测试</div>
}
}
打印看一下 ref 是啥
可以看出，ref.current 拿到了 dom 元素，所以我们可以实现 dom 元素本身的一些功能，如 input 的聚焦：
export class Demo extends React.Component {
constructor(props) {
super(props)
this.myRef = createRef()
}
onClick = () => {
this.myRef.current.focus()
}
render() {
return (
<div>
<button onClick={this.onClick}>聚焦</button>
<input ref={this.myRef} />
</div>
)
}
}
官网还提供了一种 ref 回调的形式:
export class Demo extends React.Component {
constructor(props) {
super(props)
this.myRef = null
}
onClick = () => {
this.myRef.focus()
}
render() {
return (
<div>
<button onClick={this.onClick}>聚焦</button>
<input ref={ele => this.myRef = ele} /> // 这里的 ele 就是该 dom 元素
</div>
)
}
}
放在类组件上
其实组件跟原生 dom 差不多，也是拥有自己的 ui、一些功能的某种元素，所以将 ref 放在组件上，也可以获取到该组件的示例。
// 子组件
class Child extends React.Component {
constructor(props) {
super(props)
this.state = {
name: 'xx'
}
}
render() {
return <div>子元素{this.state.name}</div>
}
}
export class Demo extends React.Component {
constructor(props) {
super(props)
this.myRef = createRef()
}
componentDidMount() {
console.log(this.myRef)
}
render() {
return (
<Child ref={this.myRef} />
)
}
}
那既然可以获取到子组件的实例，我们就可以操作子组件了，比如文章最开始说，我想在父组件里去捞子组件的某些状态值。
class Child extends React.Component {
constructor(props) {
super(props)
this.state = {
count: 0
}
}
onClick = () => {
this.setState({count: this.state.count+1})
}
render() {
return <button onClick={this.onClick}>点击+1：{this.state.count}</button>
}
}
export class Demo extends React.Component {
constructor(props) {
super(props)
this.myRef = createRef()
}
onClick = () => {
console.log(this.myRef.current.state.count) // 拿到子组件的状态值
}
render() {
return (
<div>
<button onClick={this.onClick}>获取子组件的点击次数</button>
<Child ref={this.myRef} /> // ref 获取到子组件实例
</div>
)
}
}
既然能拿值，我也能拿函数去修改子组件
class Child extends React.Component {
constructor(props) {
super(props)
this.state = {
name: 'xx'
}
}
changeName = () => {
this.setState({name: 'ww'})
}
render() {
return <div>子元素{this.state.name}</div>
}
}
export class Demo extends React.Component {
constructor(props) {
super(props)
this.myRef = createRef()
}
onClick = () => {
this.myRef.current.changeName() // 父组件的手伸到子组件里去啦
}
render() {
return (
<div>
<button onClick={this.onClick}>改变子组件的状态</button>
<Child ref={this.myRef} />
</div>
)
}
}
当然这个例子并不恰当，父组件想更改子组件的状态的话，应该把状态提升到父组件中，然后作为子组件的props传递进去。
主要是 ref 提供一种方式去绕过 props 来实现父子组件通信。
放在函数组件上
这是我文章开头写需求时犯的错，ref 不能放在函数组件上，因为函数组件没有实例。
const Child = () => {
return <div>子组件</div>
}
export const Demo = () => {
const myRef = useRef() // 可以在函数组件内创建 ref
useEffect(() => {
console.log(myRef)
}, [])
return <Child ref={myRef} /> // 但是放在函数组件上无效
}
那函数组件就不能使用 ref 了吗，那肯定不是哈哈。我们可以使用 forwardRef 包装函数组件。
const Child = (props, ref) => { // 包装后，除了原有的 props 外， ref 也被传了进来
return <div ref={ref}>子组件</div> // 还是得挂载到 dom 上
}
const ProChild = React.forwardRef(Child) // 重点在这里
export const Demo = () => {
const myRef = useRef()
useEffect(() => {
console.log(myRef)
}, [])
return <ProChild ref={myRef} />
}
这里贴一下官网的 tip：
那既然函数组件也可以使用 ref 的话，我们用函数组件实现一下父组件捞子组件的数据，不过可以看出，使用 forwardRef 包裹后，ref 还是得挂载到 dom 或者类组件上，如果我只想挂载数据还需要搭配 useImperativeHandle。
const Child = (props, ref) => {
const [count, setCount] = useState(0)
useImperativeHandle(
ref,
() => ({ // 这里就是暴露给外部 ref 的数据
getVal: ()=> count
}),
[count],
)
const onClick = () => {
setCount(pre => pre+1)
}
return <button onClick={onClick}>点击+1：{count}</button>
}
const ProChild = React.forwardRef(Child)
export const Demo = () => {
const myRef = useRef()
const onClick = () => {
console.log(myRef.current.getVal()) // 拿到子组件的值
}
return <><button onClick={onClick}>获取子组件的点击次数</button><ProChild ref={myRef} /></>
}
至此完成了做需求时留下的问题 ✅
总结
最后还是需要强调一下，父组件获取子组件状态的场景，一般还是状态提升 + 回调来通信，需求最终也是使用这种方式来实现的，最开始之所以想用 ref，是觉得状态提升后，子组件变化了会引起父组件的重新渲染，但是我只想拿数据而不引起渲染。
跟师傅说了一下我写需求时的想法，师傅见解如下：
- 优先考虑状态提升
- 有性能问题的话，考虑状态提升 + memo
- 不想给多个组件加 memo 的话，就要考虑引入 redux/mobx 了
- 如果引入 redux/mobx 是一种成本的话，那 ref 也不是不可以哈哈哈
以上就是React ref的使用详解的详细内容，更多关于React ref的使用的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要介绍了在React 组件中使用Echarts的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
许多朋友遇到React Native 无法链接模拟器的问题，怎么解决呢，本文给大家分享完整简便解决方法及配置例题，对React Native 链接模拟器相关知识感兴趣的朋友一起看看吧2021-06-06
详解如何在React中优雅的使用addEventListener
这篇文章主要为大家详细介绍了如何在React中优雅的使用addEventListener，文中的示例代码简洁易懂，对大家学习React有一定的帮助，需要的可以参考一下2023-01-01
在 React 中,我们经常需要更新组件的状态（state）,使用 setState 方法是一种常见的方式来实现状态的更新,而在使用 setState 方法时,有两种不同的写法,即对象式和函数式,本文将介绍这两种写法的区别和使用场景,需要的朋友可以参考下2024-03-03
这篇文章主要给大家介绍了关于在React.js中使用collections时key的重要性，注意：一定不能不能忘了key，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面跟着小编来一起学习学习吧。2017-08-08
React antd中setFieldsValu的简便使用示例代码
form.setFieldsValue是antd Form组件中的一个方法,用于动态设置表单字段的值,它接受一个对象作为参数,对象的键是表单字段的名称,值是要设置的字段值,这篇文章主要介绍了React antd中setFieldsValu的简便使用,需要的朋友可以参考下2023-08-08
本文主要介绍了React脚手架搭建的学习，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要给大家介绍了关于React中如何引入Angular组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-08-08
关于 Refs ，React 官网讲解的对于新手来说不太友好，还是自己一字一句解读后并以代码验证的方式后真正理解的.2021-05-05
这篇文章主要介绍了React中的Hooks路由跳转问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
最新评论