快捷導(dǎo)航

關(guān)于react 父子組件的執(zhí)行順序

更新時(shí)間：2022年09月15日 14:11:11 作者：ohMyGod_123

這篇文章主要介紹了關(guān)于react 父子組件的執(zhí)行順序，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

react父子組件的執(zhí)行順序

react版本：17.x，在此版本中完全可以用Hooks去進(jìn)行開(kāi)發(fā)了，開(kāi)始先講class組件，只是為了更好的幫助理解。

在開(kāi)發(fā)項(xiàng)目的過(guò)程中，由于項(xiàng)目比較大，拆分組件的結(jié)構(gòu)比較復(fù)雜，會(huì)涉及到一個(gè)組件中下面嵌套了好幾級(jí)的子級(jí)組件，這里就涉及到父子組件中生命周期的執(zhí)行順序的問(wèn)題；

本文主要講兩種情況，class組件和函數(shù)組件，講一下執(zhí)行常用到的生命周期的執(zhí)行順序：

1.class組件

這里涉及到一些react組件的生命周期函數(shù)，需要一定的基礎(chǔ)，這里就不再贅述，詳細(xì)可以去看react官方文檔，請(qǐng)看代碼：

import React from 'react';
 
const buildClass = (name)=>{
  return class extends React.Component{
    constructor(props) {
      super(props);
      console.log( name + ' constructor');
    }
    UNSAFE_componentWillMount() {
      console.log( name + ' componentWillMount');
    }
    componentDidMount() {
      console.log( name + ' componentDidMount');
    }
    componentWillUnmount() {
      console.log( name + ' componentWillUnmount');
    }
    UNSAFE_componentWillReceiveProps(nextProps) {
      console.log( name + ' componentWillReceiveProps(nextProps)');
    }
    shouldComponentUpdate(nextProps, nextState) {
      console.log( name + ' shouldComponentUpdate(nextProps, nextState)');
      return true;
    }
    UNSAFE_componentWillUpdate(nextProps, nextState) {
      console.log( name + ' componentWillUpdate(nextProps, nextState)');
    }
    componentDidUpdate(prevProps, prevState) {
      console.log( name + ' componetDidUpdate(prevProps, prevState)');
    }
  }
}
class Child extends buildClass('Child'){
  render(){
    console.log('Child render')
    return (
      <div>child</div>
    )
  }
}
class ClassFn extends buildClass('Parent'){
  render(){
    console.log('Parent render')
    return (
      <Child />
    )
  }
};
 
export default ClassFn;

然后在其他組件中去引用ClassFn.tsx這個(gè)文件；可以看一下頁(yè)面在初始化載入ClassFn時(shí)生命周期的執(zhí)行順序：

這里注意一下Parent就是ClassFn這個(gè)組件。

2.函數(shù)組件 hooks無(wú)依賴(lài)的情況

//HooksFn.tsx，以下是此文件對(duì)應(yīng)的代碼
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
 
const Ai = props => {
  useEffect(() => {
    console.log("ai組件加載完成");
  });
  return <div className="ai" />;
};
 
const Home = props => {
  useEffect(() => {
    console.log("Home組件加載完成");
  });
  return (
    <div className="home">
      <Ai />
    </div>
  );
};
 
function HooksFn() {
  useEffect(() => {
    console.log("HooksFn組件加載完成");
  });
 
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Home />
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
 
export default HooksFn;

在上面的代碼中，注意一下控制臺(tái)打印出來(lái)的順序是：

ai組件加載完成 => Home組件加載完成 => HooksFn組件加載完成

如下圖所示：

此時(shí)如果effect的第二個(gè)參數(shù)有依賴(lài)對(duì)象時(shí)，依然也是先執(zhí)行的子組件對(duì)應(yīng)的Hook。

子組件的effect函數(shù)的有依賴(lài)的情況如下：

//HooksFn.tsx
import React, { useEffect } from "react";
  
const Ai = props => {
  useEffect(() => {
    console.log("ai組件加載完成");
  }, [props.name]);
  return <div className="ai" />;
};
 
const Home = props => {
  useEffect(() => {
    console.log("Home組件加載完成");
  }, [props.name]);
  return (
    <div className="home">
      <Ai {...props}/>
    </div>
  );
};
 
function HooksFn(props) {
  // Hooks中有依賴(lài)的情況
  useEffect(() => {
    console.log("HooksFn組件加載完成");
  }, [props.name]);
 
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Home {...props}/>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
 
export default HooksFn;

在其他地方飲用水HooksFn這個(gè)組件：

import HooksFn from '@/pages/exercise/HooksFn';
 
<HooksFn name={'12'}/>

在控制臺(tái)的順序如下圖：

最近在做項(xiàng)目的時(shí)候發(fā)現(xiàn)了問(wèn)題，在進(jìn)行組件拆分的時(shí)候，把其中一個(gè)很重要的請(qǐng)求放在了父組件沒(méi)拆出來(lái)，以為會(huì)先發(fā)送這個(gè)請(qǐng)求，結(jié)果排到了最后發(fā)父組件的請(qǐng)求，我當(dāng)時(shí)就特別納悶兒，為何會(huì)這樣了，后來(lái)百度了一大堆資料，才發(fā)現(xiàn)跟父子組件的執(zhí)行順序有關(guān)系。但是我就是想讓父組件對(duì)應(yīng)的那個(gè)請(qǐng)求先發(fā)送怎么辦？

最后我的解決辦法是：

把這個(gè)父組件的請(qǐng)求方法放在useLayoutEffect這個(gè)Hook中就行了。

在實(shí)際的項(xiàng)目開(kāi)發(fā)過(guò)程中，確實(shí)需要會(huì)出現(xiàn)一些場(chǎng)景，需要父組件的執(zhí)行順序在子組件前面，這是后一定要注意react中生命周期方法的執(zhí)行順序，如果是在項(xiàng)目中用到Hooks組件比較多的情況，可以考慮一下使用useLayoutEffect。

以上就是本次分享的全部?jī)?nèi)容了，希望能給你工作中遇到的難題帶來(lái)幫助！也希望大家多多支持腳本之家。

您可能感興趣的文章: