詳解React?hooks組件通信方法

更新時間：2022年07月26日 14:08:33 作者：曲鳥

這篇文章主要介紹了React?hooks組件通信,在開發(fā)中組件通信是React中的一個重要的知識點，本文通過實例代碼給大家講解react hooks中常用的父子、跨組件通信的方法，需要的朋友可以參考下

一、前言

組件通信是React中的一個重要的知識點，下面列舉一下 react hooks中常用的父子、跨組件通信的方法

二、父子組件通信

1）父組件傳值給子組件

子組件代碼:

//子組件
const Child = ({ param1, param2 }) => {
  return <>父組件傳遞的參數(shù)：{param1},{param2}</>
}

param1、param2 為子組件接收父組件的傳參，父組件代碼如下：

父組件代碼

//父組件
const Parent = () => {
  return <Child //子組件
    params1="1"
    params2="2"
  />
}

運行效果

2）子組件傳值給父組件

子傳父嚴格來講還是父傳子，父組件傳遞給子組件ref，子組件將想要暴露給父組件的值放在上面，然后父組件就可以使用其值：

首先需要導入對應的模塊包useImperativeHandle、useRef,forwardRef ：

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

父組件代碼

//父組件

const Parent = () => {//父組件
  const ref = useRef(); //ref
  useEffect(() => {
    console.log(ref)
  }, [])
  return (
    <Child //子組件
      ref={ref} //將ref傳遞給子組件
    />)
}

子組件代碼

//子組件
const Child = forwardRef(({ },ref) => {
  useImperativeHandle(ref, () => ({
    data: '我是子組件'
  }));
  return <>我是子組件</>
})

運行后控制臺輸出

{
   "current": {
       "data": "我是子組件"
   }
}

3）跨組件傳值（父傳孫子組件）

跨組件傳值我們頁可以使用最開始介紹的父傳子的方法，一層層的嵌套傳遞，例如：

const Parent = () => {
  return <Child1 //子組件
    param1="1"
    param2="2"
  />
}
//子組件
const Child1 = ({ param1, param2 }) => {
  return <Child2 param1={param1} param2={param2} />
}
//子子組件
const Child2 = ({ param1, param2 }) => {
  return <>父組件傳遞的參數(shù)：{param1},{param2}</>
}

但如果有更多層嵌套時，一層層的傳遞會顯得很冗余和麻煩，所以我們可以使用context來解決這個問題。

在項目目錄創(chuàng)建一個context.js文件用于創(chuàng)建我們的context，代碼如下：

import { createContext } from 'react'
const myContext = createContext(null)
export default myContext

然后在我們組件文件中引入我們定義的myContext，并引入react對應包:

import React, { useContext } from 'react';
import myContext from './context'

父組件代碼

const Parent = () => {
  //使用Provider傳遞值
  return <myContext.Provider value={{ param1: "1", param2: "2" }}>
    <Child1 />
  </myContext.Provider>
}

子組件和子子組件代碼

//子組件無需改動
const Child1 = () => {
  return <Child2 />
}
//子子組件
const Child2 = () => {
  //通過useContext獲取父組件的值
  const { param1, param2 } = useContext(myContext)  
  return <>父組件傳遞的參數(shù)：{param1},{param2}</>
}

運行效果