前端React中函数式hooks组件中关于ref使用介绍，以及forwardRef 与 useImperativeHand详解

知识领域：前端 React、函数式Hooks组件、Class类组件 技术关键字： ref + createRef + useRef + forwardRef + useImperativeHand 内容概要：解决在react中父组件调用子组件中的方法问题，尤其是函数式组件，子组件没有实例的情况下，父组件如何调用子组件方法 适用人群：前端开发者 目标：解决函数式组件父组件调用子组件方法问题 在React开发中，`ref`是一个非常重要的特性，它允许我们获取到React组件或DOM元素的实例，以便直接操作它们。在类组件中，我们通常使用`createRef()`来创建`ref`，而在函数式组件中，则使用`useRef()`。 1. **类组件中的`ref`** 在类组件中，`createRef()`创建的`ref`可以在组件实例化后通过`.current`属性访问。例如，我们可以将`ref`附加到DOM元素，然后在`componentDidMount()`或`componentDidUpdate()`等生命周期方法中操作这个元素。如果`ref`附加到一个类组件实例，`ref.current`则指向该组件实例，从而可以调用组件的任何方法。 2. **函数式组件中的`ref`** 函数式组件不能直接使用`createRef()`，但可以使用`useRef()`。`useRef()`返回一个可变的`ref`对象，其`.current`属性在组件的整个生命周期内保持不变。这意味着即使组件重新渲染，`useRef()`创建的`ref.current`也不会改变，这使得`useRef()`可以用来保存任何可变的值。然而，直接将`useRef()`附加到函数式组件上无法获取到组件实例，因为函数组件没有实例。 3. **`createRef`与`useRef`的区别** `createRef()`仅适用于类组件，每次渲染时都会创建新的引用，而`useRef()`在函数式组件中使用，每次渲染都返回相同的引用，适合保存跨多个渲染的状态。 4. **`forwardRef`** 在函数式组件中，如果需要调用子组件的方法，可以使用`forwardRef()`。`forwardRef()`接收两个参数：一个函数组件和一个`ref`，它将`ref`“透传”给子组件，使父组件能够访问子组件内部的方法。这样，即使子组件是函数式的，父组件也能通过`ref`调用子组件的方法。 5. **`useImperativeHandle`** 有时候，我们可能希望控制子组件暴露给父组件的接口。`useImperativeHandle()`就是为此目的设计的，它接收两个参数：`ref`和一个函数，该函数定义了父组件通过`ref`访问子组件时所看到的值。这可以用来定制父组件如何与子组件交互，使其更符合需求。 举例来说，假设有一个`Child`组件，我们想在`Parent`组件中调用`Child`的`focus`方法。可以这样做： ```jsx import React, { forwardRef, useRef, useImperativeHandle } from 'react'; const Child = forwardRef((props, ref) => { const childRef = useRef(null); useImperativeHandle(ref, () => ({ focus: () => childRef.current.focus(), })); return <input ref={childRef} />; }); const Parent = () => { const childRef = useRef(null); const focusChild = () => { if (childRef.current) { childRef.current.focus(); } }; return ( <> <button onClick={focusChild}>聚焦子组件输入框</button> <Child ref={childRef} /> </> ); }; export default Parent; ``` 在这个例子中，`Child`通过`forwardRef`和`useImperativeHandle`暴露了`focus`方法，使得`Parent`组件可以调用这个方法来聚焦子组件的输入框。 `ref`、`forwardRef`和`useImperativeHandle`是React中处理组件间通信和直接操作DOM的强大工具。正确使用它们可以实现复杂的功能，同时保持组件的简洁性和可维护性。