UseEffect dans React est-il réellement un effet ?

Réagir : Je te choisis

J'ai commencé mon propre voyage avec React JS en tant que Mon Pokémon Starter pour explorer le monde Javascript des Frameworks. À mon premier coup d'œil, je suis tombé sous le charme car il réduit beaucoup de tonnes de code de manipulation impérative du DOM. J'aime vraiment l'idée d'un framework manipulant automatiquement le DOM en fonction de l'état.

Au début, je n'ai pas pris en compte la taille de la réaction et la mémoire qu'elle consomme, ce qui pourrait vaincre Snorlax au poids.
Après avoir appris React, je suis tombé sur de nombreux Framework comme Vue, Angular, Svelte. Quand j'arrive enfin à SolidJS, mes yeux se sont ouverts

J'ai commencé à suivre la diffusion en direct et les articles de Ryan Carniato, l'auteur de SolidJS. Il a totalement changé ma façon de voir les Frameworks. J'ai commencé à comprendre les systèmes de réactivité des frameworks Javascript. Quand je me suis retourné un peu et que j'ai vu mon Starter Pokemon React et son système de réactivité et de rendu, je n'ai pas pu contrôler mon rire

C'est comme si j'avais été dupé dès le début. Pourquoi faut-il tout recommencer à chaque changement d’État ? Si oui, alors pourquoi avons-nous vraiment besoin d'un hook nommé useEffect pour agir comme un effet secondaire.

Entrez maintenant dans le titre de l'article

J'ai intitulé cet article ainsi : UseEffect dans React est-il en fait un effet ? pour ouvrir les yeux sur Réagissez comme Vegapunk a ouvert les yeux des gens sur le gouvernement (Désolé d'avoir gâché les fans d'OP). Il y a beaucoup de choses à critiquer à son sujet. C'est donc aujourd'hui le jour de l'utilisation de l'Effect qui a le plus menti en cachant son vrai nom.

Si vous êtes débutant ou si vous demandez à un débutant chez React, ils donneront une explication de useEffect comme

Une fonction qui se réexécute chaque fois que les valeurs du tableau de dépendances changent.

Si vous êtes cette personne, vous avez vraiment de la chance de connaître la vérité selon laquelle on vous enseigne mal. React est réexécuté chaque fois que quelque chose change. Il n'est donc pas nécessaire de réexécuter une fonction car ce n'est pas nécessaire. Ici, je vais expliquer la vérité à ce sujet

Que signifie réellement Effet ?

Laissez-moi vous expliquer ce que signifie réellement l'effet. Dans le système Reactivity, l'effet est en fait appelé Side Effect. Commençons par un exemple

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

Ici, la fonction createEffect accepte une fonction qui se réexécute chaque fois que les valeurs du tableau à partir du deuxième argument changent. Ici, la fonction à l'intérieur de createEffect est un effet secondaire de nom, en d'autres termes, cette fonction dépend du nom de l'état. Chaque fois que la valeur du nom est modifiée, l'effet secondaire doit être réexécuté. C’est en réalité ce que signifie Side Effect.

Que fait réellement React ?

Permettez-moi d'écrire le même code en termes de React

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

Chaque fois que setName était appelé, useEffect était réexécuté. Je comprends totalement. Permettez-moi de donner un code équivalent en supprimant simplement useEffect. Cela fonctionne également parce que useState de React ne créera aucun état réactif

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

TADA ! Cela fonctionne bien dans React car il se réexécute à chaque fois que l'état de useState
changements. Permettez-moi de donner un autre exemple pour expliquer useEffect.

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

Maintenant, chaque fois que l'âge est modifié, console.log("New name", name) est également exécuté, ce qui n'est pas ce que nous voulons. Nous l'enveloppons donc avec useEffect.

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

C'est corrigé maintenant. Par conséquent, useEffect empêche en fait l’exécution qui est exactement le contraire de Effects. J'espère que vous comprenez ce que cela fait réellement. Voici une explication appropriée pour useEffect.

useEffect est un hook qui vous permet de s'exécuter uniquement lorsqu'il y a un changement d'état

Je savais que l'explication de l'Effet secondaire était similaire, mais c'est comme le Côté opposé d'une pièce.
En explication des effets secondaires

Les effets secondaires sont les fonctions qui s'exécutent chaque fois qu'il y a un changement d'état

Dans le Reactivity System, rien d'autre que les réexécutions d'effets et les effets sont la fonction qui ne s'exécute que chaque fois que l'état change.

Dans React, tout autre que les réexécutions d'effets et les effets sont les fonctions qui empêchent l'exécution sans qu'il y ait un changement dans le tableau de dépendances

Enfin, j'espère que vous comprenez ce que fait réellement useEffect. L'exemple ci-dessus est indiqué comme étant la pire pratique car vous n'aurez peut-être pas besoin d'un effet. Je comprends totalement. Mais c'est comme s'ils nous recommandaient de ne pas utiliser useEffect comme effet.

Gros mensonge

C'est expliqué comme

useEffect est un React Hook qui vous permet de synchroniser un composant avec un système externe.

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!