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);