React Hooks in Action: Analisis Mendalam daripada useState kepada useContext

Analisis mendalam useState dan useContext

React Hooks mengubah sepenuhnya pengurusan keadaan dan penggunaan semula fungsi komponen React, membenarkan komponen fungsi mempunyai fungsi komponen kelas.

useState: Negeri pengurusan komponen fungsi

pengenalan:

useState ialah Hook paling asas dalam React, yang membolehkan kami menambah keadaan kepada komponen berfungsi. useState ialah Cangkuk terbina dalam yang disediakan oleh React untuk menambah keadaan setempat kepada komponen berfungsi. Ia menerima nilai awal sebagai parameter dan mengembalikan tatasusunan. Elemen pertama tatasusunan ialah keadaan semasa dan elemen kedua ialah fungsi yang mengemas kini keadaan.

import React, { useState } from 'react';

function Example() {
  // Initialization status count is 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Fungsi setCount yang dikembalikan oleh useState digunakan untuk mengemas kini keadaan. Setiap kali setCount dipanggil, React memaparkan semula komponen dan menjana semula DOM maya berdasarkan nilai keadaan baharu, kemudian melaksanakan perbezaan DOM yang cekap dan akhirnya mengemas kini DOM sebenar.

Pemahaman yang mendalam tentang

Cara useState berfungsi, ketidaksinkronan kemas kini keadaan dan kesannya terhadap prestasi.

• Kemas kini keadaan adalah tidak segerak, yang bermaksud bahawa jika setCount dipanggil berbilang kali dalam gelung peristiwa yang sama, React hanya akan menggunakan nilai terakhir.

• useState tidak menyokong perbandingan cetek objek kompleks. Jika anda perlu mengemas kini keadaan berdasarkan keadaan sebelumnya, anda boleh menggunakan bentuk fungsi setCount, seperti setCount(prevCount => prevCount 1).

Aplikasi Lanjutan

Digabungkan dengan useEffect untuk mengendalikan kesan sampingan, seperti pemerolehan data dan pembersihan.

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

function Example() {
  // Initialization state
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Data acquisition function
  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch('https://api.example.com/data');
      const json = await response.json();
      setData(json);
      setError(null);
    } catch (err) {
      setError(err.message);
      setData(null);
    } finally {
      setLoading(false);
    }
  };

  // useEffect monitors data changes and executes when rendering for the first time
  useEffect(() => {
    fetchData();
  }, []);

  // Rendering the UI
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Data Retrieved Successfully</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

); } export default Example;

Salin selepas log masuk

Tafsiran contoh kod: Pertama, kami menggunakan useState untuk mencipta tiga pembolehubah keadaan: data menyimpan data yang diperoleh, memuatkan menunjukkan sama ada data sedang dimuatkan dan ralat menyimpan sebarang maklumat ralat yang mungkin.

Kemudian, kami mentakrifkan fungsi fetchData untuk pemerolehan data tak segerak. Fungsi ini mengandungi pengendalian ralat dan logik kemas kini keadaan.

Seterusnya, kami menggunakan useEffect untuk melaksanakan pemerolehan data. Parameter kedua useEffect ialah tatasusunan kebergantungan. Melewati tatasusunan kosong di sini bermakna ia hanya dilaksanakan sekali selepas komponen dipasang, iaitu, data diperoleh apabila ia mula-mula diberikan. Ini memastikan bahawa data diperoleh apabila komponen dimuatkan, bukannya diperoleh semula setiap kali keadaan dikemas kini.

Dalam fungsi panggil balik useEffect, kami memanggil fungsi fetchData. Memandangkan fetchData mengubah nilai data, pemuatan dan ralat, tidak perlu menambah pembolehubah keadaan ini pada tatasusunan kebergantungan, kerana perubahannya akan mencetuskan pemaparan semula komponen, dengan itu secara automatik melaksanakan pemerolehan data baharu.

useContext: Penyelesaian kontekstual untuk keadaan dikongsi

pengenalan

useContext digunakan untuk menghantar data merentas komponen tanpa menghantar props secara eksplisit.

Pertama, kita perlu mencipta Konteks:

import React, { useState } from 'react';

function Example() {
  // Initialization status count is 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

然后在组件中使用 penggunaanKonteks：

import React, { useContext } daripada 'react';
import { ThemeContext } daripada './ThemeContext';

fungsi Butang() {
  const theme = useContext(ThemeContext);

  kembali (
    <butang>



<h4>
  
  
  Pemahaman yang mendalam
</h4>

<ul>
<li>Komponen yang menggunakan useContext akan dipaparkan semula apabila pembekal dikemas kini, walaupun keadaan komponen lain tidak berubah.</li>
<li>Jika berbilang komponen melanggan Konteks yang sama, semuanya akan dipaparkan semula apabila keadaan pembekal berubah, yang mungkin menyebabkan overhed prestasi yang tidak diperlukan. Ini boleh dioptimumkan melalui strategi seperti React.memo atau shouldComponentUpdate.</li>
<li>Untuk mengelakkan penyalahgunaan, hanya gunakan Konteks apabila anda perlu berkongsi keadaan merentas berbilang peringkat, jika tidak prop harus diberi keutamaan.</li>
</ul>

<h3>
  
  
  Aplikasi gabungan useState dan useContext
</h3>

<p>Menggabungkan useState dan useContext, kami boleh mencipta aplikasi kaunter dengan fungsi penukaran tema:<br>
</p>

<pre class="brush:php;toolbar:false">import React, { createContext, useState, useContext } daripada 'react';

// Mencipta Konteks Tema
const ThemeContext = createContext('light');

fungsi ThemeProvider({ kanak-kanak }) {
  const [tema, setTheme] = useState('light');

  kembali (
    <ThemeContext.Provider value={theme}>
      {anak-anak}
      <butang onClick={() => setTheme(tema === 'cahaya' ? 'gelap' : 'cahaya')}>
        Togol Tema
      </butang>
    </ThemeContext.Provider>
  );
}

fungsi Counter() {
  const theme = useContext(ThemeContext);
  const [count, setCount] = useState(0);

  kembali (
    <div>



<p>Penjelasan contoh kod: ThemeProvider menggunakan useState untuk mengurus keadaan tema, dan komponen Counter melanggan tema melalui useContext dan menggunakan useState untuk mengurus keadaan kaunter. Apabila tema ditukar, Kaunter akan dipaparkan semula untuk memaparkan warna tema yang sepadan.</p>


          

            
        

Atas ialah kandungan terperinci React Hooks in Action: Analisis Mendalam daripada useState kepada useContext. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!