React@16.x（12）ref 转发-forwardRef

1，介绍

上篇文章中提到，ref 只能对类组件使用，不能对函数组件使用。

而 ref 转发可以对函数组件实现类似的功能。

使用举例：

import React, { Component } from "react";function CompA(props, ref) {return (<h1><div ref={ref}>组件A</div><span>{props.desc}</span></h1>);
}const NewCompA = React.forwardRef(CompA);export default class App extends Component {refA = React.createRef();componentDidMount() {console.log(this.refA);}render() {return <NewCompA ref={this.refA} desc="测试"></NewCompA>;}
}

打印结果

解释：

通过 React.forwardRef() 来实现 ref 转发。其实就是通过 HOC：参数为组件，返回新组件。

特点：

• 参数只能是函数组件，并且该函数接收2个参数：
  • 参数一不变，依旧是 props；
  • 参数二就是一个 ref: {current: null}，也就是 React.forwardRef() 返回的新组件接收的 ref 属性。它让使用者来决定作为谁的引用。比如上面的例子中，就作为一个子元素的引用。
• 返回的新组件，和原来的函数组件没有任何区别，只是可以传递 ref 属性了。

2，类组件如何使用

既然明确规定了 React.forwardRef() 的参数只能是函数，该函数的参数也是确定的，那可以将类组件包装一层来达到目的。

更改上面的例子如下：

class CompA extends Component {render() {return (<h1><div ref={this.props.forwardRef}>组件A</div><span>{this.props.desc}</span></h1>);}
}// forwardRef 这个属性名是随意的，只是约定俗成为这个单词了。
const NewCompA = React.forwardRef((props, ref) => {return <CompA {...props} forwardRef={ref}></CompA>;
});

4，应用场景-高阶组件HOC

在之前的高阶组件HOC中，有个问题没有解决：

const Alog = withLog(CompA)

此时使用的是 Alog 组件，那如何获取原组件 CompA 的方法和属性呢？
对 Alog 使用 ref 获取的并不是是 CompA 的组件实例。

可以使用 ref 转发解决：

源代码：

export default function withLog(Comp) {return class LogWrapper extends Component {componentDidMount() {console.log(`${Comp.name}组件被创建了`);}componentWillUnmount() {console.log(`${Comp.name}组件被销毁了`);}render() {return <Comp {...this.props} />;}};
}

修改后：

import React, { Component } from "react";export default function withLog(Comp) {class LogWrapper extends Component {componentDidMount() {console.log(`${Comp.name}组件被创建了`);}componentWillUnmount() {console.log(`${Comp.name}组件被销毁了`);}render() {const { forwardRef, ...rest } = this.props;return <Comp ref={forwardRef} {...rest} />;}}return React.forwardRef((props, ref) => {return <LogWrapper {...props} forwardRef={ref}></LogWrapper>;});
}

这样在使用 withLog 时，并不会影响对源组件 ref 的获取。

---

以上。