createRef 是 React 上面的 API，React.createRef() 没有任何参数

  1. class Text extends React.Component {
  2.     constructor (props){
  3.       super(props);
  4.     this.divRef = React.createRef();
  5.   }
  6.   render(){
  7.       return (
  8.         <div ref={this.divRef}></div>
  9.     )
  10.   }
  11. }

通过 createRef 创建 ref 对象
通过元素的 ref 属性可以附加到 React 元素上
一般通过构造器中给 this 上的属性赋值一个 ref，方便整个组件使用

ref 只要传递 React 元素中，就可以利用 ref 的 current 属性访问到该真实 DOM 节点
ref 在 componentDidMount 和 componentDidUpdate 触发前更新

ref 有不同使用方式

  1. ref 在 HTML 元素，那么 current 是真实 DOM 节点
  2. ref 在 class 组件，那么 current 是组件的实例
  3. ref 在函数组件（没有实例）createRef 附加不到在组件上，就没办法使用

  • 函数组件是使用 Hooks useRef 来解决的

    1. function Test() {
    2. const divRef = React.useRef(null);
    4. React.useEffect(() => {
    5.   console.log(divRef);
    6. }, [])
    8. return (
    9.   <div ref={divRef}>Hello, Function Ref!!!</div>
    10. )
    11. }