javascript - forwardRef可以获取子组件内DOM节点，但是获取子组件DOM的意义是什么呢？

Question

forwardRef可以获取子组件内DOM节点：

import React, { forwardRef, LegacyRef, useRef } from 'react';
import logo from './logo.svg';
import './App.css';

//#region 子组件定义
const ChildComp = forwardRef(( props, ref: LegacyRef<HTMLInputElement> ) => {

  return <input value="我是子组件的input" ref={ref} />
})
//#endregion

function App() {

  const inpRef = useRef(null)

  const focusFn = () => {
    console.log(inpRef.current)
  }

  return (
    <div className="App">
      <ChildComp ref={inpRef} />

      <button onClick={focusFn}>点击打印当前inpuRef</button>
    </div>
  );
}

export default App;

请问下，获取子组件DOM的意义是什么？

Answer 1

使用 forwardRef 从父组件获取子组件内部的DOM节点，虽然听起来可能违背了React的数据流和抽象的原则，但在某些场景下，这种做法是有其重要意义的。

1. 聚焦控制

在表单控制或特定交互设计中，可能需要在组件加载时或根据某些事件主动将焦点移动到一个特定的输入元素或组件内部的元素上。使用 forwardRef 可以直接操作DOM，让父组件能够控制子组件内部元素的聚焦。

2. 动画和视觉效果

某些动画效果或视觉处理（如滚动到页面的特定位置）需要直接操作DOM元素。通过 forwardRef使得在父组件中可以实现这样的效果

3. 外部库的集成

在React项目中集成非React的第三方库时经常会遇到需要直接操作DOM的情况。这些库可能需要对DOM进行直接的读取或修改操作。

4. 测量和定位

需要对组件内的元素进行尺寸测量（比如高度和宽度）或计算位置时，必须先获取DOM元素的引用。

5. 性能优化

在极少数情况下，直接操作DOM可能比通过状态和属性更有效，尤其是在批量操作或高频更新时。

注意事项

虽然 forwardRef 提供了直接操作子组件DOM的方法，但这并不意味着我们应该随时使用它。与直接操作DOM相关的代码对React的声明式和组件化原则构成了侵入，可能会导致难以理解、维护的代码基础。因此，仅在真正没有其他纯React的解决方案时才考虑使用 forwardRef 来操作DOM。

React大力推崇数据驱动视图的模式，通常应通过状态和属性来实现组件间的通信和控制，以保持应用的可维护性和可扩展性。不过，forwardRef 提供了一种灵活的逃生舱，用于处理那些无法纯粹通过React数据流解决的场景。

Answer 2

forwardRef可以获取子组件内DOM节点这句话本身是错的，首先不仅仅是DOM节点，其次不是获取。

父级通过useRef得到了一个引用，可以简单理解为得到了一个指向特定地址的指针，然后把这个引用（把特定地址）告诉子组件了。子组件可以为引用赋值，从而将内部信息暴露给该引用的调用者。

例如：父组件仅提供了布局，业务需求展示上一篇文章摘要、下一篇文章摘要和文章详情，此时如果父组件不知道（也不需要知道）当前的文章是哪一篇，那就可以要求文章详情组件提供该信息，甚至直接提供上一篇、下一篇的信息完成业务。

Answer 3

算是父子通信的一种？比如说 react 的想给表单赋值，有两种属性的方式 value 和 defaultValue，那么想介乎两种方式之间应该使用什么呢？ref.setValue 咯。

eventBus 啥的不太好选中某一个组件

所以 forwardRef 主要是为了将子组件的操作方法暴露出去，然后让父组件可以通过暴露出去的方法控制子组件

Answer 4

这样你父组件 就能直接操作element了啊
比如

  ref.current?.focus(); //  让input 聚焦
  ref.current?.value //  获得 value 值

一般都是结合 useImperativeHandle 一起使用，分场景