ref 使用方法

Refs 在 React 中起初的作用是做到对Dom 元素的引用，当我们想操作的原生 DOM 元素的时候，我们可以使用Ref 做到对元素的引用。

除了保持对 DOM 元素的引用之外，还可以保持对某个值的引用。

在编写组件的时候，我们可能需要用到非受控组件，如果我们自定义一个Input 组件，这个时候需要有非受控的方式的话，我们需要暴露出ref 给父组件，用以获取input 控件的value。这个时候，需要用 ForwardedRef 方法，用于暴露 ref 给父组件。React.forwardRef会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。

参考学习视频

use Ref 获取 DOM 元素

 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
26
27
28
29
30
31

import React, { useRef } from "react";


const Child1 = (props) => {
  console.log(props)

  return (
    <div>
      CHILD !!!!!! 
      <button onClick={()=>props.callback()} >
        btn
      </button>
    </div>
  )
}

export default function UseRefExample() {
  const childRef = useRef(null)
  const btnClicked = () => {
    console.log(childRef.current)
  }
  return (
    <div>
      helloworld
      <div ref={childRef}>
        world1
      </div>
      <Child1  callback={btnClicked} />
    </div>
  )
}

useRef 的其他用法

注意： 修改 ref 的值是不会触发 UI 的更新的， 所以 还是要用 setState的方法

 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import React, { useEffect, useRef } from "react";
import useWinSize from './useWinSize'


const Child1 = (props) => {
  console.log(props)

  return (
    <div>
      CHILD !!!!!! 
      <button onClick={()=>props.callback()} >
        btn
      </button>
    </div>
  )
}

export default function UseRefExample() {
  const childRef = useRef(null)
  const btnClicked = () => {
    console.log(childRef.current)
  }
  const winSize = useWinSize()

  const numRef = useRef(1)

  useEffect(()=>{
    console.log('windows change',winSize)
    numRef.current++;
    console.log('update cnt',numRef)
  },[winSize])
  return (
    <div>
      helloworld
      <div ref={childRef}>
        world1
      </div>
      <Child1  callback={btnClicked} />
    </div>
  )
}