Eine kurze Analyse der Verwendung der useEffecfa-Funktion in React Hook

Dieser Artikel stellt Ihnen die useEffecfa-Funktion in React Hook vor und spricht über die Verwendungsdetails der useEffecfa-Funktion. Ich hoffe, dass er Ihnen hilfreich sein wird!

Detaillierte Analyse von useEffect

Grundlegende Verwendung von useEffecf

Fortsetzung von oben: Im vorherigen Artikel haben wir State Hook erklärt. Wir können ihn bereits über diesen Hook-Status in Funktionskomponenten definieren . [Verwandte Empfehlungen: Redis-Video-Tutorial, Programmiervideo]

Wir wissen, dass es in Klassenkomponenten Lebenszyklusfunktionen geben kann. Wie können diese Funktionen also ähnlich wie Lebenszyklen in Funktionskomponenten definiert werden?

Mit Effect Hook können Sie einige Funktionen ausführen, die dem Lebenszyklus in der Klasse ähneln.

Tatsächlich sind Netzwerkanforderungen, manuelle DOM-Aktualisierungen und einige Ereignisüberwachungen allesamt Nebeneffekte der React-Aktualisierung des DOM Die Vervollständigung dieser Funktionen wird als Effekt-Hook bezeichnet

Funktionskomponente plus Hook-Implementierung:

Über den useEffect-Hook können Sie React mitteilen, dass nach dem Rendern bestimmte Vorgänge ausgeführt werden müssen. useEffect erfordert, dass wir eine Rückruffunktion übergeben, die nach dem DOM-Update in React ausgeführt wird Der Vorgang ist abgeschlossen (

d. h. nachdem die Komponente gerendert wurde

), diese Funktion wird zurückgerufen;

Standardmäßig, egal ob nach dem ersten Rendern oder nach jeder Aktualisierung, Diese Rückruffunktion wird ausgeführt; im Allgemeinen schreiben wir Nebeneffektoperationen in diese Rückruffunktion (

z. B. Netzwerkanforderungen, Betriebs-DOM, Ereignisüberwachung

Es sollte also beachtet werden, dass es viele Sprichwörter gibt useEffect wird verwendet, um den Lebenszyklus zu simulieren, aber tatsächlich ist dies nicht der Fall; useEffect kann den Lebenszyklus simulieren, aber seine Hauptfunktion besteht darin, Nebenwirkungen auszuführen Effekte (Effekt)

• Während des Schreibprozesses von Klassenkomponenten müssen wir bestimmte Nebeneffektcodes in ComponentWillUnmount löschen:
• Zum Beispiel unser vorheriger Ereignisbus oder das manuelle Aufrufen von subscribe in Redux;默认情况下，无论是第一次渲染之后，还是每次更新之后，都会执行这个回调函数; 一般情况下我们在该回调函数中都是编写副作用的操作(例如网络请求, 操作DOM, 事件监听)

因此需要注意的是, 有许多说法说useEffect就是用来模拟生命周期的, 其实并不是; useEffect可以做到模拟生命周期, 但是他主要的作用是用来执行副作用的

import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      counter: 100
    }
  }

  // 进入页面时, 标题显示counter
  componentDidMount() {
    document.title = this.state.counter
  }

  // 数据发生变化时, 让标题一起变化
  componentDidUpdate() {
    document.title = this.state.counter
  }

  render() {
    const { counter } = this.state

    return (
      <div>
        <h2 id="counter">{counter}</h2>
        <button onClick={() => this.setState({counter: counter+1})}>+1</button>
      </div>
    )
  }
}

export default App

---

清除副作用(Effect)

在class组件的编写过程中，某些副作用的代码，我们需要在componentWillUnmount中进行清除:

比如我们之前的事件总线或Redux中手动调用subscribe;

都需要在componentWillUnmount有对应的取消订阅;

Effect Hook通过什么方式来模拟componentWillUnmount呢?

useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B:

type EffectCallback = () => (void | (() => void | undefined));

为什么要在 effect 中返回一个函数?

这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数;

如此可以将添加和移除订阅的逻辑放在一起;

它们都属于 effect 的一部分;

React 何时清除 effect?

React 会在组件更新和卸载的时候执行清除操作, 将上一次的监听取消掉, 只留下当前的监听 ;

正如之前学到的，effect 在每次渲染的时候都会执行;

import React, { memo, useEffect, useState } from 'react'

const App = memo(() => {
  const [counter, setCounter] = useState(200)

  // useEffect传入一个回调函数, 在页面渲染完成后自动执行
  useEffect(() => {
    // 一般在该回调函数在编写副作用的代码(网络请求, 操作DOM, 事件监听)
    document.title = counter
  })

  return (
    <div>
      <h2 id="counter">{counter}</h2>
      <button onClick={() => setCounter(counter+1)}>+1</button>
    </div>
  )
})

export default App

---

使用多个useEffect

使用Hook的其中一个目的就是解决class中生命周期经常将很多的逻辑放在一起的问题:

比如网络请求、事件监听、手动修改DOM，这些往往都会放在componentDidMount中;

一个函数组件中可以使用多个Effect Hook，我们可以将逻辑分离到不同的useEffect中:

import React, { memo, useEffect } from 'react'

const App = memo(() => {
  useEffect(() => {
    // 监听store数据发生改变
    const unsubscribe = store.subscribe(() => {

    })

    // 返回值是一个回调函数, 该回调函数在组件重新渲染或者要卸载时执行
    return () => {
      // 取消监听操作
      unsubscribe()
    }
  })

  return (
    <div>
      <h2 id="App">App</h2>
    </div>
  )
})

export default App

Hook允许我们按照代码的用途分离它们， 而不是像生命周期函数那样, 将很多逻辑放在一起:

React将按照 effect 声明的顺序依次调用

sind beide da muss eine entsprechende Abmeldung in ComponentWillUnmount sein;

---

Wie simuliert Effect Hook ComponentWillUnmount?

useEffect Die Callback-Funktion A selbst kann einen Rückgabewert haben, und dieser Rückgabewert ist ein weiterer Rückruffunktion B:

type EffectCallback = () => (void | (() => void | undefiniert));

Warum eine Funktion zurückgeben möchten in der Wirkung?

Dies ist der optionale Clearing-Mechanismus der Wirkung. Jeder Effekt kann eine Löschfunktion zurückgeben;

Auf diese Weise kann die Logik des Hinzufügens und Entfernens von Abonnements zusammengestellt werden;

Sie sind alle Teil des Effekts;

Wann wird React gelöscht? ?Effekt?

🎜React führt einen Bereinigungsvorgang durch, wenn die Komponente aktualisiert und deinstalliert wird, wobei der letzte Listener gelöscht wird und nur der aktuelle Listener übrig bleibt 🎜

import React, { memo, useEffect } from 'react'

const App = memo(() => {
  // 监听的useEffect
  useEffect(() => {
    console.log("监听的代码逻辑")

    return () => {
      console.log("取消的监听代码逻辑")
    }
  })

  // 发送网络请求的useEffect
  useEffect(() => {
    console.log("网络请求的代码逻辑")
  })

  // 操作DOM的useEffect
  useEffect(() => {
    console.log("操作DOM的代码逻辑")
  })

  return (
    <div>
      App
    </div>
  )
})

export default App

🎜🎜🎜🎜Mehrfachen useEffect verwenden🎜🎜🎜🎜Einer der Zwecke der Verwendung von Hook besteht darin, das Problem zu lösen, dass im Lebenszyklus einer Klasse oft viel Logik zusammengefügt wird🎜: 🎜 🎜🎜Wie Netzwerkanfragen, Ereignisüberwachung und manuelle Änderung des DOM werden diese häufig in „componentDidMount“ platziert

import React, { memo, useEffect, useState } from 'react'

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 发送网络请求的useEffect, 只有在counter发生改变时才会重新执行
  useEffect(() => {
    console.log("网络请求的代码逻辑")
  }, [counter])

  return (
    <div>
      <h2 id="nbsp-setCounter-counter-counter"> setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App

🎜🎜Hook ermöglicht es uns, den Code nach seinem Zweck zu trennen, anstatt viel Logik wie Lebenszyklusfunktionen zusammenzufügen🎜:🎜🎜🎜React ruft die Komponente in der Reihenfolge entsprechend auf Reihenfolge der Effektdeklaration Jeder Effekt;🎜🎜🎜🎜🎜🎜🎜 useEffect-Leistungsoptimierung🎜🎜🎜🎜Standardmäßig wird die Rückruffunktion von useEffect bei jedem Rendern erneut ausgeführt. Dies führt jedoch zu zwei Problemen🎜:🎜🎜🎜Einige Wir möchten den Code nur einmal ausführen (🎜Zum Beispiel kann eine Netzwerkanforderung einmal beim ersten Rendern der Komponente ausgeführt werden, es ist nicht erforderlich, sie mehrmals auszuführen🎜), ähnlich wie in „componentDidMount“ und „componentWillUnmount“ in Klassenkomponenten;🎜🎜Darüber hinaus führen mehrere Ausführungen auch zu bestimmten Leistungsproblemen 🎜🎜🎜🎜Wie entscheiden wir, wann useEffect ausgeführt werden soll und wann nicht? 🎜🎜🎜🎜useEffect hat tatsächlich zwei Parameter: 🎜

• 参数一: 执行的回调函数, 这个参数我们已经使用过了不再多说;
• 参数二: 是一个数组类型, 表示 该useEffect在哪些state发生变化时，才重新执行;(受谁的影响才会重新执行)

案例练习:

受count影响的Effect;

import React, { memo, useEffect, useState } from 'react'

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 发送网络请求的useEffect, 只有在counter发生改变时才会重新执行
  useEffect(() => {
    console.log("网络请求的代码逻辑")
  }, [counter])

  return (
    <div>
      <h2 id="nbsp-setCounter-counter-counter"> setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App

但是，如果一个函数我们不希望依赖任何的内容时，也可以传入一个空的数组 []:

那么这里的两个回调函数分别对应的就是componentDidMount和componentWillUnmount生命周期函数了;

import React, { memo, useEffect, useState } from 'react'

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 传入空数组表示不受任何数据依赖
  useEffect(() => {
    // 此时传入的参数一这个回调函数: 相当于componentDidMount
    console.log("监听的代码逻辑")

    // 参数一这个回调函数的返回值: 相当于componentWillUnmount
    return () => {
      console.log("取消的监听代码逻辑")
    }
  }, [])

  return (
    <div>
      <h2 id="nbsp-setCounter-counter-counter"> setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App

总结: useEffect可以模拟之前的class组件的生命周期(类似而不是相等), 并且它比原来的生命周期更加强大, 青出于蓝而胜于蓝

更多编程相关知识，请访问：编程教学！！

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verwendung der useEffecfa-Funktion in React Hook. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!