Refs 转发 （react）

Refs转发

Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但其对某些组件，尤其是可重用的组件库是很有用的。最常见的案例如下所述。

转发 refs 到 DOM 组件

考虑这个渲染原生 DOM 元素 button 的 FancyButton 组件：

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

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

虽然这种封装对类似 FeedStory 或 Comment 这样的应用级组件是理想的，但其对 FancyButton 或 MyTextInput 这样的高可复用 “叶”组件来说可能是不方便的。这些组件倾向于在整个应用中以一种类似常规 DOM button 和 input 的方式被使用，并且访问器DOM 节点对管理焦点，选中或动画来说是不可避免的。

Ref 转发是一个可选特性，其允许某些组件接受 ref ，并将其向下传递 （换句话说，转发它）给子组件。

在下面的示例中，FancyButton 使用 React。forwardRef 来获取传递给它的 ref ，然后转发到它渲染的 DOM button ：

const FancyButton = React.frowardRef((porps,ref) => (
	<button ref={ref} className="FancyButton">
		{porps.children}
	</button>
));

// 你可以直接获取 DOM button 的ref ：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

这样，使用 FancyButton 的组件可以获取底层 DOM 节点 button 的 ref ，并在必要时访问，就像其直接使用 DOM button 一样。

以下时对上述示例发生情况的逐步解释：
1.我们通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量。
2.我们通过指定 ref 为 JSX 属性，将其向下传递给 .
3.React 传递 ref 给 forwardRef 内函数 （props，ref ） => … , 作为其第二个参数。
4.我们向下转发该 ref 参数到 ,将其指定为 JSX 属性。
5.当 ref 挂载完成，ref .current 将指定 DOM 节点。

注意

第二个参数 ref 只在使用 React.forwardRef 定义组件时存在。常规函数和class 组件不接受 ref 参数，且 props 中也不存在 ref 。
Ref 转发不仅限于 DOM 组件，你也可以转发 refs 到 class 组件实例中 。

在高阶组件中转发 refs

这个技巧对高阶组件 （也就是 HOC）特别有用。我们从一个输出组件 props 到控制台的 HOC 示例开始：

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