虽然无论是vue还是react都不体长直接操作DOM，但是在实际的项目中，无法避免使用到DOM，react的高阶组件很常见，但是如果直接在高阶组件上使用ref，是获取不到真是dom的，这个时候就需要用到react的refs转发
function Hoc(WarppedComponent) {
class NewComponent extends React.Component {
render() {
return <WarppedComponent {...this.props}>
}
}
}
impot Hoc from './Hoc';
class Child extends React.Component {
...
}
export default Hoc(Child)
import Child from './Child';
<Child ref="xxx"/>
像是这种的ref其实是被挂载道HOC这个组件上去了，想要获取到真正的DOM就需要用到refs转发，refs转发其实就是利用React.forwardedRef这个API明确的将refs转发发哦真正需要获取DOM的组件当中
import Child from './Child';
this.state = {
ref: React.createRef()
}
<Child ref={ref} />
// 可以直接用 this.state.ref.current.refs获取到当前真实dom
function Hoc(WarppedComponent) {
class NewComponent extends React.Component {
...
render() {
const {forwardedRef, ...rest} = this.props;
return <WarppedComponent ref={forwardedRef} {...rest}>
}
}
return React.forwardRef((props, ref) => {
return <NewComponent {...props} forwardedRef={ref}>
})
}
注：一个createRef实例只能应用到一个高阶函数上面
<Child1 ref={ref}>
<Child2 ref={ref}>
//这样的话会导致Child2的覆盖Child1的DOM，所以需要createRef两次
