React Refs转发实现流程详解

function FancyButton(props) {
  return (
    <button className="FancyButton">
      {props.children}
    </button>
  )
}

//子组件
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
))
//父组件
//可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
//这样，在父组件中可以直接使用DOM button

 function logProps(WrappedComponent) {
   class LogProps extends React.Component {
     componentDidUpdate(prevProps) {
       console.log('old props:', prevProps);
       console.log('new props:', this.props);
     }
     render() {
       return <WrappedComponent {...this.props} />;
     }
   }
   return LogProps;
 }

class FancyButton extends React.Component {
     focus() {
       // ...
     }
     // ...
}
   // 我们导出 LogProps，而不是 FancyButton。
   // 虽然它也会渲染一个 FancyButton。
   export default logProps(FancyButton)

   import FancyButton from './FancyButton';
   const ref = React.createRef();
   // 我们导入的 FancyButton 组件是高阶组件（HOC）LogProps。
   // 尽管渲染结果将是一样的，
   // 但我们的 ref 将指向 LogProps 而不是内部的 FancyButton 组件！
   // 这意味着我们不能调用例如 ref.current.focus() 这样的方法
   <FancyButton
     label="Click Me"
     handleClick={handleClick}
     ref={ref}
   />;

function logProps(Component) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }
    render() {
      const {forwardedRef, ...rest} = this.props;

      // 将自定义的 prop 属性 “forwardedRef” 定义为 ref
      return <Component ref={forwardedRef} {...rest} />;
    }
  }
  // 注意 React.forwardRef 回调的第二个参数 “ref”。
  // 我们可以将其作为常规 prop 属性传递给 LogProps，例如 “forwardedRef”
  // 然后它就可以被挂载到被 LogProps 包裹的子组件上。
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} />;
  });
}

const WrappedComponent = React.forwardRef((props, ref) => {
  return <LogProps {...props} forwardedRef={ref} />;
})

const WrappedComponent = React.forwardRef(
  function myFunction(props, ref) {
    return <LogProps {...props} forwardedRef={ref} />;
  }
)

function logProps(Component) {
  class LogProps extends React.Component {
    // ...
  }
  function forwardRef(props, ref) {
    return <LogProps {...props} forwardedRef={ref} />;
  }
  // 在 DevTools 中为该组件提供一个更有用的显示名。
  // 例如 “ForwardRef(logProps(MyComponent))”
  const name = Component.displayName || Component.name;
  forwardRef.displayName = `logProps(${name})`;
  return React.forwardRef(forwardRef);
}