WEBKT

React forwardRef 详解：场景、方法、原理与替代方案

3 0 0 0

1. 什么是 React Ref？回顾与预热

2. 为什么需要 forwardRef？解决 Ref 传递问题

3. forwardRef 的使用方法

4. forwardRef 内部实现原理

5. 替代方案与优缺点对比

5.1. 使用事件回调

5.2. 使用状态管理

5.3. 使用 Context

5.4. forwardRef vs. 其他方案总结

6. 总结：何时使用 forwardRef？

7. 进阶：forwardRef 与 TypeScript 结合

8. 最佳实践与注意事项

9. 总结与展望

你好，我是老码农！今天我们来聊聊 React 中一个比较高级，但又非常实用的特性——forwardRef。如果你对 React 的 Ref 已经有了一定了解，但对 forwardRef 还不太熟悉，那么这篇文章绝对适合你。我会用最通俗易懂的方式，结合实际案例，带你深入理解 forwardRef 的使用场景、方法、内部实现原理，以及不使用 forwardRef 的替代方案和优缺点对比。

1. 什么是 React Ref？回顾与预热

在深入 forwardRef 之前，我们先来简单回顾一下 React 的 Ref。Ref 是 React 中访问 DOM 节点或组件实例的一种方式。它可以让我们在不直接操作 DOM 的情况下，获取 DOM 节点的信息，或者调用组件的实例方法。这在某些场景下非常有用，比如：

  • 聚焦输入框： 当页面加载完成后，自动将光标聚焦到某个输入框。
  • 控制动画： 通过 Ref 获取动画元素，然后控制动画的播放、暂停等。
  • 访问子组件的方法： 父组件需要调用子组件的方法时。

通常，我们可以通过以下两种方式创建 Ref：

  1. React.createRef() (类组件)

    		import React from 'react';
    		 
    		class MyComponent extends React.Component {
    		  constructor(props) {
    		    super(props);
    		    this.inputRef = React.createRef();
    		  }
    		 
    		  componentDidMount() {
    		    // 获取 DOM 节点，并设置 focus
    		    this.inputRef.current.focus();
    		  }
    		 
    		  render() {
    		    return <input type="text" ref={this.inputRef} />;
    		  }
    		}

  2. useRef (函数组件)

    		import React, { useRef, useEffect } from 'react';
    		 
    		function MyComponent() {
    		  const inputRef = useRef(null);
    		 
    		  useEffect(() => {
    		    // 获取 DOM 节点，并设置 focus
    		    inputRef.current.focus();
    		  }, []);
    		 
    		  return <input type="text" ref={inputRef} />;
    		}

通过以上方式，我们就可以在组件中获取到 <input> 元素的 DOM 节点，并调用其 focus() 方法。这在很多情况下都非常方便。但是，当我们需要在父组件中访问子组件的 DOM 节点或者方法时，问题就来了。

2. 为什么需要 forwardRef？解决 Ref 传递问题

假设我们有一个自定义的 Button 组件，我们希望在父组件中能够直接调用这个 Button 组件的 focus() 方法。按照我们之前的理解，可能会这样做：

  1. 子组件 (Button.js):

    		import React, { useRef, useEffect } from 'react';
    		 
    		function Button(props) {
    		  const buttonRef = useRef(null);
    		 
    		  useEffect(() => {
    		    // 模拟一些初始化操作
    		    console.log('Button 组件挂载');
    		  }, []);
    		 
    		  const handleFocus = () => {
    		    buttonRef.current.focus();
    		  };
    		 
    		  return (
    		    <button ref={buttonRef} onClick={props.onClick}>
    		      {props.children}
    		    </button>
    		  );
    		}
    		 
    		export default Button;

  2. 父组件 (App.js):

    		import React, { useRef, useEffect } from 'react';
    		import Button from './Button';
    		 
    		function App() {
    		  const buttonRef = useRef(null);
    		 
    		  const handleClick = () => {
    		    // 尝试调用子组件的 focus 方法
    		    buttonRef.current.focus(); // 报错！
    		  };
    		 
    		  useEffect(() => {
    		    console.log('App 组件挂载');
    		  }, []);
    		 
    		  return (
    		    <div>
    		      <Button ref={buttonRef} onClick={handleClick}>点击我</Button>
    		      <button onClick={handleClick}>调用 Button focus</button>
    		    </div>
    		  );
    		}
    		 
    		export default App;

运行这段代码，你会发现一个问题：buttonRef.current.focus() 会报错，因为 buttonRef.current 的值是 undefined。这是因为，在 React 中，默认情况下，父组件无法直接访问子组件的 DOM 节点。当我们在父组件中给子组件传递 ref 时，实际上 ref 并没有被传递到子组件的 DOM 节点上，而是传递到了子组件的 React 元素上。这会导致父组件获取到的 ref 引用指向的是子组件的 React 元素，而不是子组件内部的 DOM 节点。

forwardRef 的出现，就是为了解决这个问题。它允许我们在父组件中获取子组件的 DOM 节点，从而可以调用子组件的 DOM 方法。

3. forwardRef 的使用方法

forwardRef 是 React 提供的一个高阶组件 (HOC)。它接收一个渲染函数作为参数，这个渲染函数接收两个参数：props 和 ref。其中，props 是父组件传递给子组件的属性，ref 是父组件传递的 ref 对象。通过 forwardRef，我们可以将父组件传递的 ref 绑定到子组件的 DOM 节点上。

  1. 修改子组件 (Button.js):

    		import React, { useRef, useImperativeHandle, forwardRef } from 'react';
    		 
    		const Button = forwardRef((props, ref) => {
    		  const buttonRef = useRef(null);
    		 
    		  const handleFocus = () => {
    		    buttonRef.current.focus();
    		  };
    		 
    		  useImperativeHandle(ref, () => ({
    		    focus: handleFocus,
    		    // 还可以暴露其他方法
    		  }));
    		 
    		  return (
    		    <button ref={buttonRef} onClick={props.onClick}>
    		      {props.children}
    		    </button>
    		  );
    		});
    		 
    		export default Button;

    在这里，我们做了几处改动：

    • 使用 forwardRef 包裹组件： 将 Button 组件用 forwardRef 包裹起来。forwardRef 接收一个函数，这个函数接收 props 和 ref 两个参数。
    • 接收 ref 参数： 在组件的函数参数中，接收父组件传递的 ref。
    • 使用 useImperativeHandle： 这是 forwardRef 的核心。useImperativeHandle 允许我们自定义暴露给父组件的实例值。它接收三个参数：ref、一个函数，以及一个可选的依赖项数组。 第一个参数就是父组件传递的 ref，第二个参数是一个函数，这个函数返回一个对象，这个对象定义了我们希望暴露给父组件的实例方法。 在这个例子中，我们暴露了 focus 方法。
    • 绑定 DOM 节点： 将内部的 DOM 节点绑定到 buttonRef 上，这样我们就可以在 focus 方法中调用 buttonRef.current.focus() 了。

  2. 父组件 (App.js) 不变：

    		import React, { useRef, useEffect } from 'react';
    		import Button from './Button';
    		 
    		function App() {
    		  const buttonRef = useRef(null);
    		 
    		  const handleClick = () => {
    		    // 尝试调用子组件的 focus 方法
    		    buttonRef.current.focus(); // 现在不会报错了
    		  };
    		 
    		  useEffect(() => {
    		    console.log('App 组件挂载');
    		  }, []);
    		 
    		  return (
    		    <div>
    		      <Button ref={buttonRef} onClick={handleClick}>点击我</Button>
    		      <button onClick={handleClick}>调用 Button focus</button>
    		    </div>
    		  );
    		}
    		 
    		export default App;

现在，当我们点击父组件的按钮时，就会调用子组件 Button 的 focus 方法，从而聚焦 Button 按钮。

4. forwardRef 内部实现原理

forwardRef 的内部实现并不复杂，我们可以简单地模拟一下它的实现：

function forwardRef(render) {
  return class extends React.Component {
    render() {
      const {
        ref,
        ...rest
      } = this.props;
      return render(rest, ref);
    }
  };
}

从上面的代码可以看出，forwardRef 实际上做的事情就是：

  1. 接收一个渲染函数： 接收一个渲染函数作为参数，这个渲染函数就是子组件的渲染函数。
  2. 创建一个组件： 创建一个 React 组件，这个组件接收 props 作为参数。
  3. 分离 ref： 在 render 函数中，从 props 中分离出 ref 和其他的 props。
  4. 调用渲染函数： 将分离出的 props 和 ref 传递给子组件的渲染函数，并返回子组件的渲染结果。

forwardRef 的核心在于，它将父组件传递的 ref 传递给了子组件的渲染函数。这样，子组件就可以通过 ref 获取到父组件传递的 ref 对象，从而可以操作 DOM 节点或者暴露实例方法。

useImperativeHandle 的作用可以理解为，它定义了子组件暴露给父组件的实例方法。它接收一个 ref 对象和一个函数作为参数。这个函数返回一个对象，这个对象定义了子组件暴露给父组件的实例方法。useImperativeHandle 内部会把这个对象赋值给 ref.current，这样父组件就可以通过 ref.current 访问到这些实例方法了。

5. 替代方案与优缺点对比

虽然 forwardRef 提供了非常强大的功能，但在某些情况下，我们可能并不需要使用它，或者有其他的替代方案。下面我们来对比一下这些替代方案，以及它们的优缺点。

5.1. 使用事件回调

这是最简单的一种方式。我们可以通过子组件的回调函数，将子组件的 DOM 节点或者方法传递给父组件。

  1. 子组件 (Button.js):

    		import React, { useRef, useEffect } from 'react';
    		 
    		function Button(props) {
    		  const buttonRef = useRef(null);
    		 
    		  useEffect(() => {
    		    // 模拟一些初始化操作
    		    console.log('Button 组件挂载');
    		    // 将 DOM 节点传递给父组件
    		    if (props.onRef) {
    		      props.onRef(buttonRef.current);
    		    }
    		  }, []);
    		 
    		  return (
    		    <button ref={buttonRef} onClick={props.onClick}>
    		      {props.children}
    		    </button>
    		  );
    		}
    		 
    		export default Button;

  2. 父组件 (App.js):

    		import React, { useRef, useEffect } from 'react';
    		import Button from './Button';
    		 
    		function App() {
    		  const buttonRef = useRef(null);
    		 
    		  const handleClick = () => {
    		    // 调用子组件的 focus 方法
    		    buttonRef.current.focus();
    		  };
    		 
    		  const handleButtonRef = (ref) => {
    		    // 接收子组件传递的 DOM 节点
    		    buttonRef.current = ref;
    		  };
    		 
    		  useEffect(() => {
    		    console.log('App 组件挂载');
    		  }, []);
    		 
    		  return (
    		    <div>
    		      <Button onClick={handleClick} onRef={handleButtonRef}>点击我</Button>
    		      <button onClick={handleClick}>调用 Button focus</button>
    		    </div>
    		  );
    		}
    		 
    		export default App;

优点：

  • 简单易懂： 实现起来比较简单，容易理解和维护。
  • 避免了 forwardRef 的复杂性： 不需要使用 forwardRef，降低了代码的复杂度。

缺点：

  • 不够灵活： 只能暴露 DOM 节点，无法暴露其他方法。
  • 耦合性高： 子组件需要知道父组件的回调函数，增加了组件之间的耦合度。

5.2. 使用状态管理

如果我们需要在父组件中控制子组件的状态，可以使用状态管理方案，比如 Redux、MobX 或者 React 的 Context。

  1. 子组件 (Button.js):

    import React, { useContext, useEffect } from 'react';

import { MyContext } from './MyContext';

function Button(props) {
  const { buttonState, setButtonState } = useContext(MyContext);
 
  useEffect(() => {
    console.log('Button 组件挂载');
  }, []);
 
  const handleFocus = () => {
    // 模拟控制 focus 状态
    setButtonState({ ...buttonState, isFocused: true });
  };
 
  return (
    <button onClick={props.onClick} onFocus={handleFocus} >
      {props.children}
    </button>
  );
}
 
export default Button;
```

  1. 父组件 (App.js):

    		import React, { useState, useEffect } from 'react';
    		import Button from './Button';
    		import { MyContext } from './MyContext';
    		 
    		function App() {
    		  const [buttonState, setButtonState] = useState({ isFocused: false });
    		 
    		  const handleClick = () => {
    		    // 模拟触发 focus 状态
    		    setButtonState({ ...buttonState, isFocused: true });
    		  };
    		 
    		  useEffect(() => {
    		    console.log('App 组件挂载');
    		  }, []);
    		 
    		  return (
    		    <MyContext.Provider value={{ buttonState, setButtonState }}>
    		      <div>
    		        <Button onClick={handleClick}>点击我</Button>
    		        {buttonState.isFocused && <span>Button is focused!</span>}
    		      </div>
    		    </MyContext.Provider>
    		  );
    		}
    		 
    		export default App;
    		// MyContext.js
    		import React from 'react';
    		export const MyContext = React.createContext();

优点：

  • 可以控制状态： 能够控制子组件的状态，实现更复杂的交互逻辑。
  • 组件间解耦： 组件之间通过状态管理进行通信，降低了组件之间的耦合度。

缺点：

  • 复杂性高： 需要引入状态管理方案，增加了代码的复杂性。
  • 性能开销： 状态更新可能会导致组件重新渲染，需要注意性能优化。

5.3. 使用 Context

React 的 Context 也可以用来在父组件中访问子组件的 DOM 节点或者方法。

  1. 创建 Context (MyContext.js):

    		import React from 'react';
    		 
    		const MyContext = React.createContext();
    		 
    		export default MyContext;

  2. 父组件 (App.js):

    		import React, { useRef, useEffect } from 'react';
    		import Button from './Button';
    		import MyContext from './MyContext';
    		 
    		function App() {
    		  const buttonRef = useRef(null);
    		 
    		  const contextValue = {
    		    buttonRef,
    		  };
    		 
    		  const handleClick = () => {
    		    // 调用子组件的 focus 方法
    		    buttonRef.current.focus();
    		  };
    		 
    		  useEffect(() => {
    		    console.log('App 组件挂载');
    		  }, []);
    		 
    		  return (
    		    <MyContext.Provider value={contextValue}>
    		      <div>
    		        <Button onClick={handleClick}>点击我</Button>
    		        <button onClick={handleClick}>调用 Button focus</button>
    		      </div>
    		    </MyContext.Provider>
    		  );
    		}
    		 
    		export default App;

  3. 子组件 (Button.js):

    		import React, { useRef, useEffect, useContext } from 'react';
    		import MyContext from './MyContext';
    		 
    		function Button(props) {
    		  const buttonRef = useRef(null);
    		  const { buttonRef: parentButtonRef } = useContext(MyContext);
    		 
    		  useEffect(() => {
    		    console.log('Button 组件挂载');
    		    // 将 DOM 节点赋值给 Context 中的 ref
    		    parentButtonRef.current = buttonRef.current;
    		  }, []);
    		 
    		  return (
    		    <button ref={buttonRef} onClick={props.onClick}>
    		      {props.children}
    		    </button>
    		  );
    		}
    		 
    		export default Button;

优点：

  • 可以访问 DOM 节点： 能够访问子组件的 DOM 节点。
  • 组件间解耦： 组件之间通过 Context 进行通信，降低了组件之间的耦合度。

缺点：

  • 需要手动管理 ref： 需要手动将 DOM 节点赋值给 Context 中的 ref，比较繁琐。
  • Context 更新可能导致性能问题： Context 的更新可能导致组件重新渲染，需要注意性能优化。

5.4. forwardRef vs. 其他方案总结

特性 forwardRef 事件回调 状态管理 Context
复杂性 较高 较低 较高 中等
灵活性 高，可以访问 DOM 节点和暴露方法 低，只能暴露 DOM 节点 高，可以控制状态和访问 DOM 节点 中等，可以访问 DOM 节点
耦合性 低 高，子组件需要知道父组件的回调函数 低 低
性能 中等 中等 低，状态更新可能导致组件重新渲染 中等，Context 更新可能导致组件重新渲染
使用场景 需要在父组件中访问子组件的 DOM 节点或暴露方法 简单场景，只需要在父组件中访问 DOM 节点 需要在父组件中控制子组件的状态 需要在父组件中访问子组件的 DOM 节点
适用范围 广泛 简单场景 复杂场景 简单到中等场景

6. 总结：何时使用 forwardRef？

通过上面的分析，我们可以得出结论：forwardRef 是一种强大的工具，但并不是万能的。它最适合的场景是：

  • 需要在父组件中访问子组件的 DOM 节点： 比如需要聚焦输入框、控制动画等。
  • 需要在父组件中暴露子组件的方法： 比如需要调用子组件的自定义方法。

如果只是简单的 DOM 节点访问，或者需要控制子组件的状态，那么事件回调、状态管理或者 Context 可能是更好的选择。选择哪种方案，取决于你的具体需求和场景。

7. 进阶：forwardRef 与 TypeScript 结合

对于使用 TypeScript 的 React 项目来说，使用 forwardRef 需要注意类型定义。下面是一个简单的例子：

import React, { useRef, useImperativeHandle, forwardRef, Ref } from 'react';
 
interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
}
 
interface ButtonHandles {
  focus: () => void;
}
 
const Button = forwardRef((props: ButtonProps, ref: Ref<ButtonHandles>) => {
  const buttonRef = useRef<HTMLButtonElement>(null);
 
  const handleFocus = () => {
    if (buttonRef.current) {
      buttonRef.current.focus();
    }
  };
 
  useImperativeHandle(ref, () => ({
    focus: handleFocus,
  }));
 
  return (
    <button ref={buttonRef} onClick={props.onClick}>
      {props.children}
    </button>
  );
});
 
export default Button;

在这个例子中：

  • ButtonProps 定义了 Button 组件的属性。
  • ButtonHandles 定义了暴露给父组件的实例方法。
  • Ref<ButtonHandles> 定义了 ref 的类型，表明父组件可以通过 ref 访问到 ButtonHandles 中定义的方法。
  • buttonRef 的类型被定义为 HTMLButtonElement，确保了 buttonRef.current 是一个 HTMLButtonElement 类型的 DOM 节点。

8. 最佳实践与注意事项

在使用 forwardRef 时，需要注意以下几点：

  • 不要滥用： forwardRef 应该只在必要的时候使用。如果只是简单的 DOM 节点访问，或者需要控制子组件的状态，那么其他替代方案可能更好。
  • 清晰的 API： 暴露给父组件的实例方法应该清晰、明确，并且提供相应的文档。
  • 类型定义： 如果使用 TypeScript，一定要为组件和暴露的方法提供清晰的类型定义，避免类型错误。
  • 性能优化： forwardRef 和 useImperativeHandle 可能会导致组件重新渲染。在性能敏感的场景中，需要注意优化。可以考虑使用 React.memo 来缓存组件的渲染结果，或者使用 useCallback 来缓存 handleFocus 等方法。
  • 避免过度封装： forwardRef 可以让你访问子组件的 DOM 节点和方法，但这并不意味着你应该过度封装组件。过度封装会增加代码的复杂性，降低可读性和可维护性。

9. 总结与展望

forwardRef 是 React 中一个非常有用的特性，它可以让我们在父组件中访问子组件的 DOM 节点和方法，从而实现更灵活的交互和控制。通过本文的讲解，相信你已经对 forwardRef 有了深入的理解。希望你在实际开发中能够灵活运用 forwardRef，并根据实际情况选择合适的替代方案。

随着 React 的不断发展，未来可能会出现更多新的特性和功能。我们需要不断学习和探索，才能更好地掌握 React，并写出更优秀的代码。 祝你在 React 的世界里越走越远！

如果你喜欢我的文章，请点赞、收藏，并分享给你的朋友们！如果你有任何问题，欢迎在评论区留言，我会尽力解答。

老码农的程序人生 ReactforwardRefRefReact进阶

评论点评

打赏赞助
sponsor

感谢您的支持让我们更好的前行

分享

QRcode

https://www.webkt.com/article/8295