快捷導(dǎo)航

React實(shí)現(xiàn)父組件調(diào)用子組件的兩種寫法

更新時(shí)間：2024年04月19日 09:23:20 作者：雙子座434

react通信分很多種,比如：父子通信,兄弟通信等等,這里我們就簡單說一下父子通信,父子通信分為：父組件調(diào)用子組件里面的方法；子組件調(diào)用子組件里面的方法,這里我們著重說一下父組件調(diào)用子組件,需要的朋友可以參考下

前言

react通信分很多種，比如：父子通信，兄弟通信等等。這里我們就簡單說一下父子通信，父子通信分為：父組件調(diào)用子組件里面的方法；子組件調(diào)用子組件里面的方法。子調(diào)父一個(gè)porps就可以解決了，這里我們著重說一下父組件調(diào)用子組件。廢話不多說，直接上代碼：

函數(shù)式寫法：

方法一：

child.js

import React, { useImperativeHandle, forwardRef } from "react";
 
function Child(props, ref) {
  useImperativeHandle(ref, () => {
    return {
      onClick: handleClick,
    }
  });
 
  const handleClick = () => {
    alert('點(diǎn)擊了');
  }
 
  return (
    <button>我是按鈕</button>
  )
}
 
export default forwardRef(Child);

index.js

import React, { useRef } from "react";
import Child from './child';
 
function Calling() {
  const nRef = useRef();
 
  const handleClick = () => {
    nRef.current.onClick();
  }
 
  return (
    <div>
      <button onClick={handleClick}>點(diǎn)擊后調(diào)用子組件</button>
      <Child ref={nRef} />
    </div>
  )
}
 
export default Calling;

父調(diào)子通過ref，簡單來說：使用鉤子函數(shù)將子組件自定義的方法綁定到ref.current上面。這里用到了三個(gè)鉤子：useRef、useImperativeHandle, forwardRef。

1.useRef：父組件使用useRef通過參數(shù)（這里的參數(shù)命名必須為ref）傳遞給子組件

2.useImperativeHandle：將子組件自定義的函數(shù)添加到父組件的ref上，注意這里，第一個(gè)參數(shù)為ref，第二個(gè)參數(shù)為對(duì)象（也就是父組件中調(diào)用的方法或者要取得屬性或者值）。

3.forwardRef：將引用的ref傳遞給子組件，這時(shí)子組件接收到的第一個(gè)參數(shù)是porps，第二個(gè)參數(shù)是ref。

上面因?yàn)閭鬟f給子組件的參數(shù)為ref關(guān)鍵字，所以子組件里必須要有接收的方法。

方法二：

child.js

import React from "react";
 
function Child(props) {
  const handleClick = () => {
    alert('點(diǎn)擊了');
  }
 
  props.nref = {
    onClick: handleClick,
  }
 
  return (
    <button>我是按鈕</button>
  )
}
 
export default Child;

index.js

import React from "react";
import Child from './child';
 
function Calling() {
  const nRef = {};
 
  const handleClick = () => {
    nRef.onClick();
  }
 
  return (
    <div>
      <button onClick={handleClick}>點(diǎn)擊后調(diào)用子組件</button>
      <Child nref={nRef} />
    </div>
  )
}
 
export default Calling;

index.js(解法二)

import React, { useRef } from "react";
import Child from './child';
 
function Calling() {
  const nRef = useRef();
 
  const handleClick = () => {
    nRef.onClick();
  }
 
  return (
    <div>
      <button onClick={handleClick}>點(diǎn)擊后調(diào)用子組件</button>
      <Child nref={nRef} />
    </div>
  )
}
 
export default Calling;

大家這里注意看方法二的兩個(gè)index.js文件差異性，無非就是將空對(duì)象換成了useRef，為什么要這樣寫呢，這樣寫有什么優(yōu)點(diǎn)嗎？當(dāng)代碼量一樣的時(shí)候，大家就應(yīng)該思考一件事情：性能。當(dāng)然，哪個(gè)性能好就選擇哪個(gè)，我對(duì)方法二的這兩個(gè)index文件做了一下對(duì)比（實(shí)際上就是空對(duì)象和useRef的比較），空對(duì)象就不用解釋過多了：引用類型...；我們著重解釋一下useRef：可以幫我們緩存數(shù)據(jù)，返回一個(gè)ref對(duì)象，里面的ref.current是用來存儲(chǔ)數(shù)據(jù)的，返回的ref對(duì)象不會(huì)被重新創(chuàng)建（言外之意就是他爸爸無論渲染多少次，這個(gè)對(duì)象指向地址永遠(yuǎn)只有最原始的那個(gè)），這里值的變化不會(huì)引起組件的重新render，組件不會(huì)因?yàn)闋顟B(tài)的更新而更新（也就是說，組件狀態(tài)改變了，這里可以保存改變的狀態(tài)），如果只想要保存狀態(tài)，不影響視圖更新，并且可以同步獲取和更新狀態(tài)的話，建議使用useRef。

大家想一想，如果他爺爺不斷渲染，使用 const nRef = {};是不是就會(huì)不斷的給nRef賦新的地址，之前的地址只有經(jīng)過一段時(shí)間的不使用才會(huì)被垃圾回收機(jī)制（不懂垃圾回收機(jī)制的去翻翻哈）釋放掉；而useRef無論他爺爺渲染多少遍，它的地址最終只有一個(gè)。

類組件寫法：

方法一：

child.js

import React , { Component } from "react"
 
class Child extends Component {
	handleClick = () => {
           alert('點(diǎn)擊了');
        }
 
	render(){
		return (<div>子組件</div>);
	}
}

index.js

class Parent extends Component {
	constructor(props) {
	    super(props);
	 	this.Child = React.createRef();
	}
 
	handleOnClick = ()=>{
		this.Child.current.handleClick();
	}
	render(){
		return (<div>
			<button onClick={this.handleOnClick}>click</button>
			<Child ref={this.Child}></Child>	
		</div>);
	}
}

方法二：

child.js

import React , { Component } from "react"
 
class Child extends Component {
        componentDidMount(){
           this.props.onRef && this.props.onRef(this);
	}
 
	handleClick = () => {
           alert('點(diǎn)擊了');
        }
 
	render(){
		return (<div>子組件</div>);
	}
}

index.js

class Parent extends Component {
	handleOnClick = ()=>{
		this.Child.current.handleClick();
	}
 
	render(){
		return (<div>
			<button onClick={this.handleOnClick}>click</button>
			<Child onRef={ data => this.Child = data }></Child>	
		</div>);
	}
}

對(duì)比一下類組件的兩個(gè)方法：

方法一：簡單易懂，缺點(diǎn)就是：如果子組件中嵌套了高階組件，那么就無法指向真實(shí)的子組件

方法二：寫法更簡單易懂，粗暴，缺點(diǎn)就是：需要自定義props屬性

這里其實(shí)還有一個(gè)方法三，思路：大家可以利用高階組件+反向繼承實(shí)現(xiàn)。

到此這篇關(guān)于React實(shí)現(xiàn)父組件調(diào)用子組件的兩種寫法的文章就介紹到這了,更多相關(guān)React父調(diào)子內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: