【高级React技术】当企业级项目采用Refs 转发和使用 HOC 解决横切关注点问题

Refs 转发

引用转发是一种通过组件将引用自动传递到其子组件之一的技术。大多数应用程序中的组件通常不需要这样做。但它对某些组件非常有用，尤其是可重用的组件库。

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

React组件隐藏其实现细节，包括其渲染结果。使用FancyButton的其他组件通常不需要获取内部DOM元素按钮的ref。这很好，因为它可以防止组件过度依赖其他组件的DOM结构。

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>; 

虽然这种封装对于应用程序级组件（如FeedStory或Comment）非常理想，但对于高度可重用的“叶”组件（如FancyButton或MyTextInput）来说可能不太方便。这些组件倾向于以类似于传统DOM按钮和输入的方式在整个应用程序中使用，访问它们的DOM节点对于管理焦点、选择或动画是不可避免的。

function logProps(WrappedComponent) {class LogProps extends React.Co