在Reactjs中使用useRef从父函数调用子函数

基础概念

useRef 是 React 提供的一个 Hook，用于在函数组件中创建一个可变的引用对象。这个引用对象在组件的整个生命周期内保持不变，即使组件重新渲染也不会改变其值。useRef 返回的对象具有一个 current 属性，你可以将它视为一个盒子，用来存储任何可变的数据。

相关优势

1. 持久性：useRef 创建的引用在组件的整个生命周期内保持不变，这使得它非常适合存储那些不需要触发重新渲染的值。
2. 访问 DOM 节点：useRef 可以用来直接访问 DOM 节点或组件实例，这在某些情况下非常有用。
3. 避免重新渲染：由于 useRef 不会触发组件的重新渲染，因此它适合用于存储那些频繁变化但不需要影响视图的数据。

类型与应用场景

useRef 可以用于存储任何类型的值，包括但不限于：

• DOM 节点引用
• 组件实例引用
• 定时器 ID
• 任何可变的数据

在 Reactjs 中使用 useRef 从父函数调用子函数

在 React 中，父组件通常不能直接调用子组件的方法。但是，你可以使用 useRef 和 forwardRef 来实现这一点。

以下是一个示例代码：

import React, { useRef, forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const handleClick = () => {
    console.log('子组件的方法被调用了！');
  };

  // 将子组件的方法绑定到 ref 上
  React.useImperativeHandle(ref, () => ({
    handleClick
  }));

  return <button onClick={handleClick}>点击我</button>;
});

const ParentComponent = () => {
  const childRef = useRef();

  const callChildFunction = () => {
    if (childRef.current) {
      childRef.current.handleClick();
    }
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={callChildFunction}>调用子组件方法</button>
    </div>
  );
};

export default ParentComponent;

遇到的问题及解决方法

问题：在父组件中无法直接调用子组件的方法。

原因：React 的设计原则之一是单向数据流，父组件不应该直接操作子组件的状态或方法。这有助于保持组件的独立性和可复用性。

解决方法：使用 useRef 和 forwardRef 可以在父组件中引用子组件的实例，并通过该实例调用子组件的方法。在上面的示例代码中，我们使用 React.useImperativeHandle 将子组件的方法暴露给父组件，然后在父组件中通过 childRef.current 调用这些方法。

参考链接

• React 官方文档 - useRef
• React 官方文档 - forwardRef
• React 官方文档 - useImperativeHandle