利用React Hook 实现函数式组件父子通信

需求：

前端遇到这样一个功能，一个父组件包裹着一个子组件，父组件内的搜索区域输入搜索参数之后会触发子组件的搜索函数，刷新数据。如图：

 

1. 选择搜索参数之后，点击搜索；
2. 触发子组件获取表单的函数（这里本来想把子组件数据获取放到父组件，但是因为考虑到数据之后会有更多的操作，就尽量减少耦合）
3. 刷新Table

 

于是就希望能在父组件点击搜索的操作函数内，去触发子组件的获取table数据的函数，这样就可以完成功能。这就要用到父子组件的通信。

 

因为这里用到的都是函数式组件（相比Class组件生命周期较多，逻辑复杂，难以拆分等缺点。函数式组件可以很容易去拆分，测试并且进行逻辑的复用）

 

父组件调用子组件函数

 

1、在父组件中使用useRef去创建一个ref实例，并且绑定到子组件

import React,{ useRef} from 'react'

//父组件
function Father (props) {
    const unitRef =