Reagieren – Verständnis und Verwendung der useEffect-Funktion

Erstens verwendenEffektbeschreibung

Wir wissen, dass es in der Funktionskomponente von React keinen Lebenszyklus und keinen Zustand gibt. Es gibt keinen Zustand, der useStateals Ersatz verwendet werden kann. Was ist also mit dem Lebenszyklus?

useEffectist react v16.8eine neu eingeführte Funktion. Wir können uns den useEffect-Hook als eine Kombination der drei Lebenszyklen von ComponentDidMount, ComponentDidUpdate und ComponentWillUnmount vorstellen. Ermöglicht die Ausführung einiger Nebenwirkungen in Funktionskomponenten;

Zu den häufigen Nebenwirkungen gehören:

1. Ajax-Anfrage senden
2. Abonnement/Starttimer einstellen
3. Ändern Sie das echte DOM manuell

Zweitens der Zeitpunkt der Ausführung

Es kann als eine Kombination dieser drei Lebenszyklusfunktionen betrachtet werden, das heißt, es wird zu diesen drei Zeitpunkten ausgeführt

ComponentDidMount (Komponente wurde gemountet)

ComponentDidUpdate (Komponente wurde aktualisiert)

ComponentWillUnmount (die Komponente wird gerade ausgehängt)

Drittens wird useEffect je nach Situation verwendet

useEffect()Es gibt zwei Parameter: Der erste Parameter ist die auszuführende Rückruffunktion, der zweite Parameter ist ein Array von Abhängigkeitsarrays (der zweite Parameter kann entsprechend den Anforderungen ausgefüllt werden) und ob die Funktion ausgeführt werden soll, hängt davon ab, ob die Variablen im Array ändern sich;

Schauen wir uns zunächst den folgenden einfachen Fall an und diskutieren ihn dann je nach Situation:

useEffect.js

import React, {
    
     useState, useEffect, useRef } from "react";

// 类型约定
interface interList {
    
    
  id: number | string; // 类型可能是number也可能是string
  text: string;
  done: boolean;
}
// 渲染数据
const myList: Array<interList> = [
  {
    
     id: 0, text: "参观卡夫卡博物馆", done: true },
  {
    
     id: 1, text: "看木偶戏", done: true },
  {
    
     id: 2, text: "打卡列侬墙", done: true }
];

const UseEffect: React.FC = (props: any) => {
    
    
  let [num, setNum] = useState(100);
  let [useInfo, SetUserInfo] = useState(myList);

   // 0，什么都不传 就是监听所有数据的变化
   useEffect(() => {
    
    
    console.log("我改变了-all");
  }); 

  // 1，此处相当于 componentDidUpdate生命周期 组件已经更新完成
  useEffect(() => {
    
    
    console.log("我改变了");
  }, [num]); // 只监听num的变化,useInfo的变化不会被监听到

  // 2，此处相当于componentDidMount生命周期 组件已经挂载完成
  useEffect(() => {
    
    
    console.log("componentDidMount");
    console.log("可以拿到num的值：", num);
  }, []);

  // 3，此处相当于 componentWillUnmount生命周期 组件即将卸载
  useEffect(() => {
    
    
    // 返回一个回调函数
    return () => {
    
    
      console.log("组件将要卸载了");
    };
  }, []);

  // 其实传不传空数组或不是空数组，useEffect函数里面的回调都会执行一次，也就是说componentWillUnmount这个生命周期页面进来就会执行
  // useEffect 这个hoosk也是可以写多个的，尽量不同的处理写在不同useEffect里面

  // 点击改变用户信息
  const change = () => {
    
    
    // react 建议不要更改原数组 返回一个数组的拷贝
    const newList = [...useInfo, {
    
     id: 3, text: "优菈", done: false }];
    SetUserInfo(newList);
  };

  // 点击加一
  const add = () => {
    
    
    setNum(++num);
  };

  const lis = useInfo.map((item, index) => {
    
    
    return (
      <li key={
    
    index}>
        {
    
    index}:{
    
    item.text}
      </li>
    );
  });

  return (
    <>
      <div>
        <h3>userEffect 副作用hooks函数</h3>
        <br />
        <button onClick={
    
    add}>点击加一</button>
        <p>{
    
    num}</p>
        <br />
        <button onClick={
    
    change}>改变用户信息</button>
        <ul>{
    
    lis}</ul>
      </div>
    </>
  );
};
export default UseEffect;

Renderings:

Der durch den obigen Code erzielte Effekt ist sehr einfach. Die beiden Schaltflächen ändern jeweils den Status ihrer jeweiligen Daten. Die Statusänderung löst die useEffecAusführung der t-Funktion aus. Der zweite Parameterparameter wirkt sich auf die Änderung dieser Funktion aus, also wie folgt eine Einzelfallbesprechung:

1. Schreiben Sie den zweiten Parameter nicht, um anzugeben, dass alle Zustände überwacht werden und eine der Änderungen diese Funktion auslöst

Wenn der zweite Parameter nicht geschrieben wird, überwacht die Funktionsoperation useEffect(method)jedes Mal alle Zustände, was dem Lebenszyklus entspricht – die Komponente wurde aktualisiert. componentDidUpdate

   import {
    
    useEffect } from "react";
   useEffect(() => {
    
    
    console.log("我改变了-all");
  }); // 监听所有数据的变化

2. Wenn der zweite Parameter []ein leeres Array ist, bedeutet dies, dass niemand überwacht

Wenn der zweite Parameter []ein leeres Array ist, bedeutet dies, dass ihn niemand überwacht und useEffect回调函数die Funktion zu diesem Zeitpunkt dem Lebenszyklus entspricht – die Komponente wurde gemountet;
componentDidMount

  // 2，此处相当于componentDidMount生命周期 组件已经挂载完成
  useEffect(() => {
    
    
    console.log("componentDidMount");
    console.log("可以拿到num的值：", num);
  }, []);

3. Wenn der zweite Parameter nur den Zustand überschreitet, der überwacht werden muss, wird die Funktion nur entsprechend diesem Zustand ausgeführt

Wenn das Array im zweiten Parameter nur übergeben wird num, bedeutet dies, dass numdiese useEffectRückruffunktion nur dann ausgelöst wird, wenn sie sich ändert, was einer Überwachung dieser Daten entspricht .

  // 1，此处相当于 componentDidUpdate生命周期 组件已经更新完成
  useEffect(() => {
    
    
    console.log("num改变了");
  }, [num]); // 只监听num的变化

Natürlich können auch mehrere () in das Array geschrieben [num,userInfo]und mehrere Datenänderungen gleichzeitig überwacht werden.

4. Geben Sie eine Rückruffunktion in useEffect zurück, die dem Lebenszyklus der Komponente entspricht, die gerade entladen wird

Was bedeutet dieser Satz?
Normalerweise hat eine Komponente einen ungeladenen Lebenszyklus. Um sie zu verwenden, useEffect 函数müssen Sie lediglich eine darin enthaltene Rückruffunktion zurückgeben. Diese Rückruffunktion entsprichtcomponentWillUnmount dem Deklarationszyklus und Sie können darin Ressourcen wie erstellte Abonnements oder Timer-IDs löschen.

  // 3，此处相当于 componentWillUnmount生命周期 组件即将卸载
  useEffect(() => {
    
    
    // 返回一个回调函数
    return () => {
    
    
      console.log("组件将要卸载了");
    };
  }, []);

Die Übergabe eines leeren Arrays bedeutet hier, dass ich Datenänderungen nicht überwachen möchte, sondern die Logik nur ausführen möchte, wenn die Komponente deinstalliert wird.

5. Passen Sie auf

Unabhängig davon, ob der zweite Durchgang ein leeres Array ist oder nicht, wird der Rückruf in der useEffect-Funktion einmal ausgeführt, dh componentWillUnmountdieser Lebenszyklus wird automatisch ausgeführt, wenn die Seite eingeht.

useEffect函数Dieser Hosk kann auch mehrfach geschrieben werden. Versuchen Sie, verschiedene Geschäftsprozesse in unterschiedlichen useEffects zu schreiben.