Adakah useEffect dalam React sebenarnya adalah Kesan?

React: Saya Pilih Awak

Saya memulakan Perjalanan Sendiri dengan React JS sebagai Pokemon Permulaan Saya untuk meneroka Dunia Rangka Kerja Javascript. Pada Pandangan Pertama saya, saya menyukainya kerana ia mengurangkan banyak tan Kod Manipulasi DOM Imperatif. Saya sangat menyukai Idea Rangka Kerja Memanipulasi DOM secara automatik berdasarkan Negeri.

Pada mulanya, saya tidak menganggap Saiz Reaksi dan Memori yang digunakan yang boleh mengalahkan Snorlax pada Berat.
Selepas mempelajari React, saya menemui banyak Rangka Kerja seperti Vue, Angular, Svelte. Apabila saya akhirnya mencapai SolidJS, Mata Saya terbuka

Saya mula mengikuti Strim Langsung dan Artikel Ryan Carniato, Pengarang SolidJS. Dia benar-benar mengubah cara saya melihat Frameworks. Saya mula memahami Sistem Kereaktifan Rangka Kerja Javascript. Apabila saya berpatah balik sedikit dan melihat My Starter Pokemon React dan It's reactivity and rendering system, saya tidak dapat mengawal Ketawa saya

Seperti saya diperbodohkan dari awal. Mengapa ada keperluan untuk menjalankan semula segala-galanya setiap kali Negeri berubah? Jika Jadi Maka Mengapa kita benar-benar memerlukan cangkuk yang dinamakan sebagai useEffect untuk bertindak sebagai kesan sampingan.

Sekarang Masuk ke Tajuk Artikel

Saya menamakan Artikel ini sebagai Adakah useEffect dalam React sebenarnya adalah Kesan? untuk membuka Mata Anda tentang Bertindak balas seperti Vegapunk membuka mata Rakyat tentang Kerajaan ( Maaf kerana Memanjakan Peminat OP ) . Terdapat banyak pemikiran untuk mengkritik mengenainya. Jadi Hari ini adalah Hari untuk kegunaanEffect yang paling banyak berbohong dengan menyembunyikan nama sebenar.

Jika Anda seorang pemula atau Anda bertanya kepada beberapa pemula di React, Mereka akan memberi penjelasan tentang useEffect sebagai

Fungsi yang dijalankan semula apabila nilai pada tatasusunan kebergantungan berubah.

Jika Anda adalah orang itu, Anda benar-benar bertuah kerana mengetahui Kebenaran bahawa Anda salah diajar. Bertindak balas disiarkan semula apabila sesuatu berubah Jadi Tidak perlu menjalankan semula fungsi kerana tidak memerlukannya. Di sini saya akan menerangkan Kebenaran mengenainya

Apakah maksud Effect sebenarnya?

Biar saya terangkan apakah maksud sebenarnya kesan. Dalam sistem Kereaktifan, Kesan sebenarnya dipanggil sebagai Kesan Sampingan. Mari kita mulakan dengan contoh

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

Di sini fungsi createEffect menerima fungsi yang dijalankan semula apabila nilai dalam Array daripada argumen kedua berubah. Di sini fungsi di dalam createEffect ialah kesan sampingan nama dalam erti kata lain yang berfungsi bergantung pada nama negeri. Apabila nilai nama ditukar, kesan sampingan harus dijalankan semula. Inilah yang sebenarnya Kesan Sampingan.

Apa sebenarnya yang dilakukan oleh React?

Biar saya menulis kod yang sama dari segi React

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

Setiap kali setName dipanggil, useEffect akan dijalankan semula. Saya betul-betul faham. Biar saya berikan kod yang setara dengan hanya mengalih keluar useEffect. Ia juga berfungsi kerana useState React tidak akan mencipta sebarang keadaan reaktif

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

TADA! Ia berfungsi dengan baik dalam React kerana ia disiarkan semula apabila keadaan daripada useState
perubahan. Biar saya berikan satu lagi contoh untuk menerangkan useEffect.

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

Kini apabila umur ditukar, console.log("Nama baharu", nama) turut dilaksanakan yang bukan seperti yang kita mahu. Jadi Kami balut dengan useEffect.

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

Ia telah ditetapkan sekarang. Oleh itu useEffect sebenarnya menghalang pelaksanaan yang betul-betul bertentangan dengan Effects. Saya harap Anda faham apa sebenarnya yang dilakukannya. Di sini penerangan yang betul untuk useEffect.

useEffect ialah cangkuk yang membolehkan anda melaksanakan hanya apabila terdapat perubahan dalam keadaan

Saya tahu Kesan Sampingan penjelasan adalah serupa tetapi Ia seperti Sisi Bertentangan Syiling.
Sebagai penerangan tentang Kesan Sampingan

Kesan Sampingan ialah fungsi yang dilaksanakan apabila terdapat perubahan dalam keadaan

Dalam Sistem Kereaktifan, Tiada apa-apa selain tayangan semula Effects dan Effects ialah fungsi yang hanya berjalan apabila keadaan berubah.

Dalam React, Segala-galanya selain Kesan ditayangkan semula dan Kesan ialah fungsi yang menghalang pelaksanaan tanpa terdapat perubahan dalam Tatasusunan Ketergantungan

Akhirnya saya harap Anda faham apa sebenarnya kegunaan useEffect. Contoh Di atas dinyatakan sebagai Amalan Terburuk di Anda Mungkin Tidak Perlu Kesan. Saya betul-betul faham. Tetapi Ia seperti Mereka mengesyorkan kami untuk tidak menggunakan useEffect sebagai Kesan.

Pembohongan Besar

Ia dijelaskan sebagai

useEffect ialah React Hook yang membolehkan anda menyegerakkan komponen dengan sistem luaran.

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.

Atas ialah kandungan terperinci Adakah useEffect dalam React sebenarnya adalah Kesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!