react中ref的使用

Ref转发是一个可选特性，其允许某些组件接收ref，并向下传递，也就是ref可以转发给子组件
React.forwardRef()能够创建一个react组件，这个组件能够将其接收的ref属性转发到其组件树下的另一组件
ref的使用主要分为三种情况：

1. 在DOM节点上使用

const Mycomponent = () => {
const ref = React.useRef()
return (
  <button ref={ref}>点击</button>
)
}

这时的ref获取的是button元素

2. class组件使用（ref指向this）

// 子组件
class Mycomponent extends React.Component {
    constructor(props: any) {
        super(props)
        this.state = {
            count: 1,
        }
        this.handleFields = this.handleFields.bind(this)
    }
    handleFields() {
        console.log('调用ref中的方法')
    }
    render() {
        return (
            <div>123</div>
        )
    }
}
const FieldComponent = React.forwardRef((props, forward) => {
  return (
    <Mycomponent ref={forward} />
  )
})
// 父组件引用
const Parent = () => {
const myRef: any = React.useRef()
// 这个的ref获取到的是子组件中的this，所以可以在封装的组件中定义相应的方法，直接通过myRef.current.handleFields()调用
console.log('myRef', myRef)
  return (
    <FieldComponent ref={myRef} />
  )
}

3. 类组件使用（通过React.useImperativeHandle()方法来定义ref中的方法和属性）

// 子组件
const MyComponent = React.forwardRef((props, forwardRef)=> {
const staffRef = React.useRef()
React.useImperativeHandle(forwardRef, () => {
        return {
            getData: (id: string) => {
                return staffRef.current.data?.[id]
            }
        }
    }, [])
  return (
     <div ref={staffRef}>类组件</div>
  )
})
// 父组件
const NewComponent = () => {
const newRef: any = React.useRef()
// ref指向的是React.useImperativeHandle()中定义的方法，可以通过newRef.current?.getData()来调用
// newRef.current?.getData()
console.log('newRef', newRef)
return (
  <MyComponent ref={newRef} />
)
}

总结： ref可用于复用组件中的方法和属性