父组件调用子组件方法 react

在React中，父组件可以通过`props`传递函数来间接调用子组件的方法。举个例子，假设我们有一个父组件`Parent.js`：

import React, { Component } from 'react';
import Child from './Child.js'; // 引入子组件

class Parent extends Component {
  onChildEvent(childInstance) {
    childInstance.sendMessage(); // 调用子组件的方法
    console.log('Received message from child:', childInstance);
  }

  render() {
    return (
      <div>
        {/* 创建一个Child组件，并通过onChildEvent prop将父组件的方法传给它 */}
        <Child onChildEvent={this.onChildEvent} />
      </div>
    );
  }
}

export default Parent;

在这个场景中，当子组件`Child`执行`this.props.onChildEvent(this)`时，会将子组件的实例（也就是`childInstance`）传递给父组件定义的`onChildEvent`方法，这样父组件就能访问和操作子组件的状态或方法。

对于函数组件，可以使用`useCallback`钩子来保存对子组件方法的引用，以避免不必要的重新渲染[^1]。

相关问题--:
1. 如何在React函数组件中实现类似的效果？
2. `useCallback`钩子的作用是什么？
3. 在React中，何时会触发组件的重新渲染？