Ref

发表于 更新于 分类于 本文字数： 1.3k 阅读时长 ≈ 1 分钟

Ref

React 支持一个特殊的、可以附加到任何组件上的 ref 属性。此属性可以是一个由 React.createRef() 函数创建的对象、或者一个回调函数、或者一个字符串（遗留 API）。当 ref 属性是一个回调函数时，此函数会（根据元素的类型）接收底层 DOM 元素或 class 实例作为其参数。这能够让你直接访问 DOM 元素或组件实例。

谨慎使用 ref。如果你发现自己经常使用 ref 来在应用中“实现想要的功能”，你可以考虑去了解一下自上而下的数据流(状态提升)。

useRef hook的作用：

1.配合ref属性，获取DOM对象，进行DOM操作
2.在组件更新期间维持一个值（也就是：可以在每次组件重新渲染时，拿到同一个值）

useRef hook 创建的ref对象，有以下特点：

1.ref对象有一个current属性，可以使用该属性存储任意值
2.修改ref对象current属性的值不会导致组件重新渲染

类式组件使用Ref

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// React.createRef
export default class MyComponent extends React.Component {
  inputRef = React.createRef()
  componentDidMount() {
    this.inputRef.current.focus();		//直接访问DOM元素的属性
  }
  render() {
    return <input type="text" ref={this.inputRef} />;	
  }

  
}

// 回调
export default class App extends React.Component {
  componentDidMount() {
    this.inputRef.focus()
  }
  render() {
    return (
      <input type="text" ref={(currentNode) => (this.inputRef = currentNode)} />	//往实例对象自身挂载
    )
  }
}

函数式组件使用Ref

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在。
import { useEffect, useRef } from 'react'
const App = () => {
  const inputRef = useRef(null)
  useEffect(() => {
    inputRef.current.focus()
  }, [])
  return (
    <div>
      <input type="text" ref={inputRef} />
    </div>
  )
}
export default App