react中如何在父组件中调用子组件的方法

在React中，父组件想要调用子组件的方法，通常有两种常见的方法：

1. **通过props传引用**（Functional Components）:
- 父组件将子组件作为一个函数或类作为prop传递，并提供一个回调函数给子组件。

   function ParentComponent() {
     const callChildMethod = (arg) => {
       // ... 执行操作，然后调用子组件方法
       childComponentMethod(arg);
     };
   
     return <ChildComponent parentCallback={callChildMethod} />;
   }
   
   function ChildComponent({ parentCallback }) {
     // ...
     const someFunction = () => {
       parentCallback("an argument");
     };
     //...
   }

2. **通过refs** (Class Components):
- 父组件需要在render方法中创建ref并将其传递给子组件。

   class ParentComponent extends React.Component {
     childRef = React.createRef();

     handleClick = () => {
       this.childRef.current.myMethod();
     };

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

   class ChildComponent extends React.Component {
     myMethod() {
       // 子组件方法实现
     }
   }

记住，使用refs应该谨慎，特别是在生命周期的变动较大的场景下，因为它们不是响应式的。尽量优先使用props传递数据和行为。

**相关问题--:**
1. 如何在React hooks版本中通过props调用子组件的方法？
2. 使用React Hooks替代refs有哪些优点？
3. 调用子组件方法时需要注意哪些性能问题？