React函数式组件中ref及forwardRef、useImperativeHandle深度解析

本文主要介绍了在前端React开发中，如何在函数式Hooks组件中使用`ref`，以及如何结合`forwardRef`和`useImperativeHandle`来解决父组件调用子组件方法的问题。 在React中，`ref`是一个特殊属性，用于获取组件内部的DOM元素或实例，以便于直接操作它们。对于Class类组件，我们可以使用`React.createRef()`创建一个`ref`，然后将其赋值给需要的元素或组件。例如，以下代码展示了如何在Class组件中使用`ref`： ```jsx class Parent extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); } componentDidMount() { console.log(this.inputRef); // 输出ref对象 this.inputRef.current.focus(); // 调用DOM元素的方法 } render() { return <input ref={this.inputRef} />; } } ``` 在函数式组件中，由于没有实例，我们不能直接使用`createRef`。此时，我们需要使用`useRef()` Hook。`useRef()`返回一个可变的`ref`对象，其`.current`属性被初始化为传入的参数（默认为`null`）。即使组件重新渲染，`useRef()`返回的引用也会保持不变，这对于需要保存某个值跨多个渲染周期是很有用的。但是，直接在函数组件上使用`ref`并不能获取到DOM元素或子组件实例，需要其他方式配合。 为了在函数组件中使用`ref`并使其能够引用子组件，我们需要结合`forwardRef`。`forwardRef`允许我们将`ref`转发给子组件，使得父组件可以间接访问到子组件。这样，子组件内部可以通过`props.ref`接收到`ref`。示例： ```jsx const Child = React.forwardRef((props, ref) => ( <input ref={ref} /> )); function Parent() { const inputRef = React.useRef(null); return <Child ref={inputRef} />; } ``` 然而，有时候我们可能需要在子组件内部对`ref`进行进一步处理，比如只暴露特定的方法给父组件。这时，我们可以使用`useImperativeHandle` Hook。它允许我们在函数组件内部定义自定义的实例方法，供父组件通过`ref`调用。例如： ```jsx const Child = React.forwardRef((props, ref) => { const inputRef = React.useRef(null); React.useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus(), })); return <input ref={inputRef} />; }); function Parent() { const childRef = React.useRef(null); const handleClick = () => { childRef.current.focus(); }; return ( <div> <button onClick={handleClick}>Focus Input</button> <Child ref={childRef} /> </div> ); } ``` 在这个例子中，`useImperativeHandle`创建了一个`focus`方法，父组件可以通过`childRef.current.focus()`来调用。 总结起来，`ref`、`createRef`、`useRef`、`forwardRef`和`useImperativeHandle`是React中处理组件间交互的重要工具。在Class组件中，`createRef`用于创建`ref`，而在函数组件中，我们需要使用`useRef`。`forwardRef`允许我们把`ref`传递给子组件，而`useImperativeHandle`则让我们可以在子组件内部控制父组件能访问哪些方法。正确理解和使用这些特性，可以有效地在React应用中管理组件间的交互和状态。