React总结1：React Hooks 中通过父组件调用子组件中的方法

先上示例：

1.子组件

import React, {useEffect, useImperativeHandle, forwardRef} from 'react';

function AllProjectTable(props, ref) {

  useImperativeHandle(ref, () => ({
    handleGetProjectList,
    handleStopProject
  }));

  // 获取项目列表
  const handleGetProjectList = () => {
  };

  // 停止项目运行
  const handleStopProject = project => {
  };

  return (
    <>
    </>
  );
}

export default forwardRef(AllProjectTable);

2.父组件

import React, {useRef} from 'react';
// 引用子组件
import AllProjectTable from './components/AllProjectTable';

function IDEIndex() {
  const allProjectTableRef = useRef();

  return (
    <>
      <AllProjectTable ref={allProjectTableRef}/>
      <button onClick={() => allProjectTableRef.current.handleGetProjectList()}>调用子组件方法</button>
    </>
  );
}

export default IDEIndex;

useImperativeHandle 使用

  useImperativeHandle(ref, createHandle, [deps]);

　　useImperativeHandle 可以在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。

　　useImperativeHandle 和 forwardRef 配合一起使用（如上子组件）

　　1.ref：定义current 对象的 ref；

　　2.createHandle：一个函数，返回值时一个对象，即这个 ref 的 current；

　　3.对象 [deps]：即依赖列表，当监听的依赖发生变化，useImperativeHandle 才会重新将子组件的示例属性输出到父组件

　　4.ref 的 current 属性上，如果为空数组，则不会重新输出

　　在使用 useImperativeHandle 之前，要清除 React 关于 ref 转发（透传）这个知识点，主要是使用 React.forwardRef 方法实现的，该方法返回一个组件，参数为函数（并不是函数组件），函数的第一个参数为父组件传递的 props，第二个给父组件传递的 ref ，其目的就是希望可以在封装组件时，外层组件可以通过ref直接控制内层组件或元素的行为。

　　正常情况下 ref 是不能挂载到函数组件上的，因为函数组件没有实例。React 官方为我们提供了 useImperativeHandle 一个类似实例的东西，帮助我们通过 useImperativeHandle 的第二个参数，把返回的对象的内容挂载到 父组件的 ref.current 上。

　　forwardRef 会创建一个 React 组件，这个组件能够将其接收的 ref 属性转发到其 组件树下的另一个组件中。

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

const Children = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    hello() {
      console.log('访问到了子组件的方法');
    }
  }));
});

function Parent() {
  const childrenRef = useRef();
  useEffect(() => {
    childrenRef.current.hello();
  }, []);

  return (
    <>
      <Children ref={childrenRef}/>
    </>
  );
}

export default forwardRef(Parent);