虽然无论是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两次