Ist useEffect in React tatsächlich ein Effekt?

Reagieren: Ich wähle dich

Ich habe meine eigene Reise mit React JS als meinem Starter-Pokémon begonnen, um die Javascript-Welt der Frameworks zu erkunden. Auf den ersten Blick bin ich darauf hereingefallen, weil es eine Menge Imperative-DOM-Manipulationscode reduziert. Ich liebe die Idee eines Frameworks, das DOM basierend auf dem Status automatisch manipuliert.

Zuerst habe ich nicht an die Größe der Reaktion und den Speicherverbrauch gedacht, der Snorlax bei Gewicht besiegen könnte.
Nachdem ich React gelernt hatte, stieß ich auf viele Frameworks wie Vue, Angular und Svelte. Als ich endlich SolidJS erreichte, wurden mir die Augen geöffnet

Ich begann, Live-Streams und Artikel von Ryan Carniato, dem Autor von SolidJS, zu verfolgen. Er hat die Art und Weise, wie ich Frameworks sehe, völlig verändert. Ich begann, die Reaktivitätssysteme von Javascript Frameworks zu verstehen. Als ich mich etwas umdrehte und sah, wie mein Starter-Pokémon reagierte und sein Reaktivitäts- und Rendering-System, konnte ich mein Lachen nicht unterdrücken

Es ist, als wäre ich von Anfang an getäuscht worden. Warum muss bei jedem Zustandswechsel alles neu ausgeführt werden? Wenn ja, warum brauchen wir dann wirklich einen Hook namens useEffect, der als Nebeneffekt wirkt?

Kommen Sie nun zum Titel des Artikels

Ich habe diesen Artikel mit „Ist useEffect in React tatsächlich ein Effekt“ betitelt? um Ihre Augen über Reaktionen wie Vegapunk zu öffnen, hat den Menschen die Augen über die Regierung geöffnet (Entschuldigung für die Verwöhnung an OP-Fans) . Es gibt viel zu kritisieren. Heute ist also der Tag für useEffect, der am meisten gelogen hat, indem er seinen wahren Namen verheimlicht hat.

Wenn Sie der Anfänger sind oder einen Anfänger bei React fragen, würden sie eine Erklärung für useEffect als

geben

Eine Funktion, die immer dann erneut ausgeführt wird, wenn sich Werte im Abhängigkeitsarray ändern.

Wenn Sie diese Person sind, können Sie sich wirklich glücklich schätzen, die Wahrheit zu kennen, dass Sie falsch unterrichtet werden. React wird immer dann erneut ausgeführt, wenn sich etwas ändert. Daher ist es nicht erforderlich, eine Funktion erneut auszuführen, da keine Notwendigkeit dafür besteht. Hier werde ich die Wahrheit darüber erklären

Was bedeutet Effekt wirklich?

Lassen Sie mich erklären, was Wirkung wirklich bedeutet. Im Reaktivitätssystem wird die Wirkung tatsächlich als Nebenwirkung bezeichnet. Beginnen wir mit einem Beispiel

const name = "John Doe"
createEffect(()=>{
    console.log("New name", name)
},[name])

Hier akzeptiert die Funktion „createEffect“ eine Funktion, die immer dann erneut ausgeführt wird, wenn sich Werte im Array aus dem zweiten Argument ändern. Hier ist die Funktion innerhalb von createEffect ein Nebeneffekt des Namens, mit anderen Worten, diese Funktion hängt vom Statusnamen ab. Immer wenn der Wert von name geändert wird, sollte der Nebeneffekt erneut ausgeführt werden. Darum geht es bei Nebenwirkungen wirklich.

Was macht React eigentlich?

Lassen Sie mich denselben Code in Bezug auf React schreiben

const [name, setName] = useState("John Doe")
useEffect(()=>{
    console.log("New name", name)
},[name])
setName("Jane Doe")

Bei jedem Aufruf von setName wurde useEffect erneut ausgeführt. Ich verstehe es vollkommen. Lassen Sie mich einen gleichwertigen Code angeben, indem ich einfach useEffect entferne. Es funktioniert auch, weil der useState von React keinen reaktiven Zustand erstellt

const [name, setName] = useState("John Doe")
console.log("New name", name)
setName("Jane Doe")

TADA! Es funktioniert gut in React, da es bei jedem Status von useState
erneut ausgeführt wird Änderungen. Lassen Sie mich ein weiteres Beispiel geben, um useEffect zu erklären.

const [name, setName] = useState("John Doe")
const [age, setAge] = useState(18)
console.log("New name", name)
setAge(21)

Jetzt wird bei jeder Änderung des Alters auch console.log("Neuer Name", Name) ausgeführt, was nicht das ist, was wir wollen. Also verpacken wir es mit useEffect.

const [name, setName] = useState("John Doe")
const [age, setAge] = useState(18)
useEffect(()=>{
    console.log("New name", name)
},[name])
setName("Jane Doe")

Es ist jetzt behoben. Daher verhindert useEffect tatsächlich die Ausführung, die genau das Gegenteil von Effects ist. Ich hoffe, Sie verstehen, was es wirklich bewirkt. Hier die richtige Erklärung für useEffect.

useEffect ist ein Hook, mit dem Sie nur dann ausführen können, wenn sich der Status ändert

Ich wusste, dass die Erklärung für die Nebenwirkung ähnlich ist, aber es ist wie die Gegenseite einer Münze.
Zur Erklärung der Nebenwirkung

Nebenwirkungen sind die Funktionen, die immer dann ausgeführt werden, wenn sich der Zustand ändert

Im Reaktivitätssystem gibt es nichts anderes als Effektwiederholungen und Effekte sind die Funktion, die nur ausgeführt wird, wenn sich der Status ändert.

In React sind alle Funktionen außer Effektwiederholungen und Effekte die Funktionen, die die Ausführung verhindern, ohne dass eine Änderung im Abhängigkeitsarray erfolgt

Abschließend hoffe ich, dass Sie verstehen, was useEffect wirklich bewirkt. Das obige Beispiel wird als schlechteste Praxis bezeichnet, bei der Sie möglicherweise keinen Effekt benötigen. Ich verstehe es vollkommen. Aber es ist, als würden sie uns empfehlen, useEffect nicht als Effekt zu verwenden.

Große Lüge

Es wird erklärt als

useEffect ist ein React Hook, mit dem Sie eine Komponente mit einem externen System synchronisieren können.

I can't totally get it because The Phrase synchronize with external system means

The system's internal state is updated to match the state of the external system.

But in reality, useEffect had nothing to do with that. useSyncExternalStore does works in problem with some quirks ( Really this problem can't be solved 100%. For now , save that for My Another article ).

Just think about this facts that React reruns code whenever state changes and useEffect is commonly used along with React state, Then Why do we need to run something based on a state? because always reruns whenever something changes.

I found a page named as Synchronizing with Effects at React Official Docs which explains about it . At there, They explained that as

Effects let you run some code after rendering so that you can synchronize your component with some system outside of React.

From above lines, It is clear that useEffect lets you write a function which executes after rendering of React. Then WTF it is named as useEffect? Does this had any kind of connection with Effect as it's name implies? It's more similar to window.onload of DOM API.

I still can't digest the example they gave

import { useState, useRef, useEffect } from 'react';

function VideoPlayer({ src, isPlaying }) {
  const ref = useRef(null);

  if (isPlaying) {
    ref.current.play();  // Calling these while rendering isn't allowed.
  } else {
    ref.current.pause(); // Also, this crashes.
  }

  return <video ref={ref} src={src} loop playsInline />;
}

export default function App() {
  const [isPlaying, setIsPlaying] = useState(false);
  return (
    <>
      <button onClick={() => setIsPlaying(!isPlaying)}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
      <VideoPlayer
        isPlaying={isPlaying}
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
      />
    </>
  );
}

Here is the reason the error If You try to run it

Runtime Error
App.js: Cannot read properties of null (reading 'pause') (9:16)

   6 |   if (isPlaying) {
   7 |     ref.current.play();  // Calling these while rendering isn't allowed.
   8 |   } else {
>  9 |     ref.current.pause(); // Also, this crashes.
                       ^
  10 |   }
  11 | 
  12 |   return <video ref={ref} src={src} loop playsInline />;

They told to us wrap it inside useEffect to solve this by

  useEffect(() => {
    if (isPlaying) {
      ref.current.play();
    } else {
      ref.current.pause();
    }
  });

because ref.current is set to null before rendering. But I could solve this by simply changed it to

 if (isPlaying) {
   ref.current?.play();
 } else {
    ref.current?.pause();
 }

If It's that what they willing to do, They it should be named as onMount like Vuejs not useEffect because effects at other library like VueJS, SolidJS really does side effect.

Here is the explanation They connected the above example with synchronisation

In this example, The “external system” you synchronized to React state was the browser media API

Does that really make any sense? I still don't know Why used synchronized here?. Here Browser Media API is available after First Render So Then Why there is a necessary of Effect here? It's a Sick Example for Effect. I never thought They would explain Effect with Example Code.

Another Joke

Effects let you specify side effects that are caused by rendering itself, rather than by a particular event.

It found this under the title What are Effects and how are they different from events? and gave above example code for this. After understanding What React really does in name of Effect and reading My Explanation, Could you connect anything?. They gave explanation of Effect of Reactivity System But They did exactly opposite. This is what I always wanted to express to Others

Final Thoughts

I hope You understand What does Effect means? and What React does in name of Effect?. After thinking All this shits, I finally decided to call useEffect
as usePreventExecution. I knew that name given by me is sick ;-) . But It is nothing when compares to What They stated about it at Official Documentation. If You found any other suitable name, Let me know at Comments.

Das obige ist der detaillierte Inhalt vonIst useEffect in React tatsächlich ein Effekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!