React Refs 的使用forwardRef 源码示例解析
三种使用方式
React 提供了 Refs，帮助我们访问 DOM 节点或在 render 方法中创建的 React 元素。
React 提供了三种使用 Ref 的方式：
1. String Refs
class App extends React.Component {
constructor(props) {
super(props)
}
componentDidMount() {
setTimeout(() => {
// 2. 通过 this.refs.xxx 获取 DOM 节点
this.refs.textInput.value = 'new value'
}, 2000)
}
render() {
// 1. ref 直接传入一个字符串
return (
<div>
<input ref="textInput" value='value' />
</div>
)
}
}
root.render(<App />);
2. 回调 Refs
class App extends React.Component {
constructor(props) {
super(props)
}
componentDidMount() {
setTimeout(() => {
// 2. 通过实例属性获取 DOM 节点
this.textInput.value = 'new value'
}, 2000)
}
render() {
// 1. ref 传入一个回调函数
// 该函数中接受 React 组件实例或 DOM 元素作为参数
// 我们通常会将其存储到具体的实例属性（this.textInput）
return (
<div>
<input ref={(element) => {
this.textInput = element;
}} value='value' />
</div>
)
}
}
root.render(<App />);
3. createRef
class App extends React.Component {
constructor(props) {
super(props)
// 1. 使用 createRef 创建 Refs
// 并将 Refs 分配给实例属性 textInputRef，以便在整个组件中引用
this.textInputRef = React.createRef();
}
componentDidMount() {
setTimeout(() => {
// 3. 通过 Refs 的 current 属性进行引用
this.textInputRef.current.value = 'new value'
}, 2000)
}
render() {
// 2. 通过 ref 属性附加到 React 元素
return (
<div>
<input ref={this.textInputRef} value='value' />
</div>
)
}
}
这是最被推荐使用的方式。
两种使用目的
Refs 除了用于获取具体的 DOM 节点外，也可以获取 Class 组件的实例，当获取到实例后，可以调用其中的方法，从而强制执行，比如动画之类的效果。
我们举一个获取组件实例的例子：
class Input extends React.Component {
constructor(props) {
super(props)
this.textInputRef = React.createRef();
}
handleFocus() {
this.textInputRef.current.focus();
}
render() {
return <input ref={this.textInputRef} value='value' />
}
}
class App extends React.Component {
constructor(props) {
super(props)
this.inputRef = React.createRef();
}
componentDidMount() {
setTimeout(() => {
this.inputRef.current.handleFocus()
}, 2000)
}
render() {
return (
<div>
<Input ref={this.inputRef} value='value' />
</div>
)
}
}
在这个例子中，我们通过 this.inputRef.current 获取到 Input 组件的实例，并调用了实例的 handleFocus 方法，在这个方法中，又通过 Refs 获取到具体的 DOM 元素，执行了 focus 原生方法。
Refs 转发
有的时候，我们开发一个组件，这个组件需要对组件使用者提供一个 ref 属性，用于让组件使用者获取具体的 DOM 元素，我们就需要进行 Refs 转发，这对于 class 组件并不是一个问题，举个示例代码：
class Child extends React.Component {
render() {
const {inputRef, ...rest} = this.props;
// 3. 这里将 props 中的 inputRef 赋给 DOM 元素的 ref
return <input ref={inputRef} {...rest} placeholder="value" />
}
}
class Parent extends React.Component {
constructor(props) {
super(props)
// 1. 创建 refs
this.inputRef = React.createRef();
}
componentDidMount() {
setTimeout(() => {
// 4. 使用 this.inputRef.current 获取子组件中渲染的 DOM 节点
this.inputRef.current.value = 'new value'
}, 2000)
}
render() {
// 2. 因为 ref 属性不能通过 this.props 获取，所以这里换了一个属性名
return <Child inputRef={this.inputRef} />
}
}
但对于函数式组件，这却是一个问题。
我们是不能在函数组件上使用 ref 属性的，因为函数组件没有实例。
所以 React 提供了 forwardRef 这个 API，我们直接看使用示例：
// 3. 子组件通过 forwardRef 获取 ref，并通过 ref 属性绑定 React 元素
const Child = forwardRef((props, ref) => (
<input ref={ref} placeholder="value" />
));
class Parent extends React.Component {
constructor(props) {
super(props)
// 1. 创建 refs
this.inputRef = React.createRef();
}
componentDidMount() {
setTimeout(() => {
// 4. 使用 this.inputRef.current 获取子组件中渲染的 DOM 节点
this.inputRef.current.value = 'new value'
}, 2000)
}
render() {
// 2. 传给子组件的 ref 属性
return <Child ref={this.inputRef} />
}
}
尤其是在我们编写高阶组件的时候，往往要实现 refs 转发。我们知道，一个高阶组件，会接受一个组件，返回一个包裹后的新组件，从而实现某种功能的增强。
但也正是如此，我们添加 ref，获取的会是包裹后的新组件的实例，而非被包裹的组件实例，这就可能会导致一些问题。
createRef 源码
现在我们看下 createRef 的源码，源码的位置在 /packages/react/class="lazy" data-src/ReactCreateRef.js，代码其实很简单，就只是返回了一个具有 current 属性的对象：
// 简化后
export function createRef() {
const refObject = {
current: null,
};
return refObject;
}
在渲染的过程中，refObject.current 会被赋予具体的值。
forwardRef 源码
那 forwardRef 源码呢？源码的位置在 /packages/react/class="lazy" data-src/ReactForwardRef.js，代码也很简单：
// 简化后
const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
export function forwardRef(render) {
const elementType = {
$$typeof: REACT_FORWARD_REF_TYPE,
render,
};
return elementType;
}
但是要注意这里的 $$typeof，尽管这里是 REACT_FORWARD_REF_TYPE，但最终创建的 React 元素的 $$typeof 依然为 REACT_ELEMENT_TYPE。
关于 createElement 的源码分析参考 《React 之 createElement 源码解读》，我们这里简单分析一下，以 InputComponent 为例：
// 使用 forwardRef
const InputComponent = forwardRef(({value}, ref) => (
<input ref={ref} className="FancyButton" value={value} />
));
// 根据 forwardRef 的源码，最终返回的对象格式为：
const InputComponent = {
$$typeof: REACT_FORWARD_REF_TYPE,
render,
}
// 使用组件
const result = <InputComponent />
// Bable 将其转译为：
const result = React.createElement(InputComponent, null);
// 最终返回的对象为：
const result = {
$$typeof: REACT_ELEMENT_TYPE,
type: {
$$typeof: REACT_FORWARD_REF_TYPE,
render,
}
}
我们尝试着打印一下最终返回的对象，确实也是这样的结构：
React 系列
React 之 createElement 源码解读
React 之元素与组件的区别
以上就是React 之 Refs 的使用和 forwardRef 的源码解读的详细内容，更多关于React Refs使用forwardRef 的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
