Rumah  >  Artikel  >  hujung hadapan web  >  Tahap pertengahan: Kaedah Kitar Hayat dan Cangkuk dalam Reaksi

Tahap pertengahan: Kaedah Kitar Hayat dan Cangkuk dalam Reaksi

PHPz
PHPzasal
2024-07-18 10:56:28999semak imbas

Mid level: Lifecycle Methods and Hooks in React

Sebagai pembangun peringkat pertengahan, memahami dan berkesan menggunakan React Hooks dan kaedah kitaran hayat adalah penting untuk membina aplikasi yang teguh, boleh diselenggara dan berskala. Artikel ini akan menyelidiki cangkuk penting, cangkuk tersuai dan corak cangkuk lanjutan, seperti mengurus keadaan kompleks dengan useReducer dan mengoptimumkan prestasi dengan useMemo dan useCallback.

Pengenalan kepada React Hooks

React Hooks membolehkan anda menggunakan keadaan dan ciri React yang lain tanpa menulis kelas. Diperkenalkan dalam React 16.8, cangkuk menyediakan pendekatan yang lebih mudah dan lebih berfungsi untuk pengurusan keadaan dan kaedah kitaran hayat.

Faedah Utama Cangkuk

  1. Kod Lebih Mudah: Cangkuk membolehkan anda menggunakan kaedah keadaan dan kitaran hayat secara langsung dalam komponen berfungsi, membawa kepada kod yang lebih mudah dibaca dan diselenggara.
  2. Guna Semula Logik: Cangkuk tersuai membolehkan anda mengekstrak dan menggunakan semula logik stateful merentas berbilang komponen.
  3. Komponen Fungsian Dipertingkat: Cangkuk menyediakan semua keupayaan komponen kelas, seperti mengurus keadaan dan kesan sampingan, tanpa perlu menggunakan kelas.

Cangkuk Penting

useState

useState ialah cangkuk yang membolehkan anda menambah keadaan pada komponen berfungsi.

Contoh:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

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

export default Counter;

Dalam contoh ini, useState memulakan pembolehubah keadaan kiraan kepada 0. Fungsi setCount mengemas kini keadaan apabila butang diklik.

useEffect

useEffect ialah cangkuk yang membolehkan anda melakukan kesan sampingan dalam komponen berfungsi, seperti mengambil data, berinteraksi secara langsung dengan DOM dan menyediakan langganan. Ia menggabungkan kefungsian beberapa kaedah kitaran hayat dalam komponen kelas (componentDidMount, componentDidUpdate dan componentWillUnmount).

Contoh:

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

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}
: 'Loading...'}
); }; export default DataFetcher;

Dalam contoh ini, useEffect mengambil data daripada API apabila komponen dipasang.

gunakanKonteks

useContext ialah cangkuk yang membolehkan anda mengakses nilai konteks untuk konteks tertentu.

Contoh:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);

  return <div>The current theme is {theme}</div>;
};

export default ThemedComponent;

Dalam contoh ini, useContext mengakses nilai semasa ThemeContext.

useReducer

useReducer ialah cangkuk yang membolehkan anda mengurus logik keadaan kompleks dalam komponen berfungsi. Ia adalah alternatif untuk menggunakanState.

Contoh:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default Counter;

Dalam contoh ini, useReducer mengurus keadaan kiraan dengan fungsi pengurang.

Cangkuk Tersuai

Cakuk tersuai membolehkan anda menggunakan semula logik stateful merentas berbilang komponen. Cangkuk tersuai ialah fungsi yang menggunakan cangkuk terbina dalam.

Contoh:

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
};

const DataFetcher = ({ url }) => {
  const data = useFetch(url);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}
: 'Loading...'}
); }; export default DataFetcher;

Dalam contoh ini, useFetch ialah cangkuk tersuai yang mengambil data daripada URL yang diberikan.

Corak Cangkuk Lanjutan

Menguruskan Keadaan Kompleks dengan useReducer

Apabila berurusan dengan logik keadaan kompleks yang melibatkan berbilang sub-nilai atau apabila keadaan seterusnya bergantung pada yang sebelumnya, useReducer boleh menjadi lebih sesuai daripada useState.

Contoh:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default Counter;

Dalam contoh ini, useReducer mengurus keadaan kiraan dengan fungsi pengurang.

Mengoptimumkan Prestasi dengan useMemo dan useCallback

gunakanMemo

useMemo ialah cangkuk yang menghafal nilai yang dikira, mengiranya semula hanya apabila salah satu kebergantungan berubah. Ia membantu mengoptimumkan prestasi dengan menghalang pengiraan mahal pada setiap paparan.

Contoh:

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

const ExpensiveCalculation = ({ number }) => {
  const computeFactorial = (n) => {
    console.log('Computing factorial...');
    return n <= 1 ? 1 : n * computeFactorial(n - 1);
  };

  const factorial = useMemo(() => computeFactorial(number), [number]);

  return <div>Factorial of {number} is {factorial}</div>;
};

const App = () => {
  const [number, setNumber] = useState(5);

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value, 10))}
      />
      <ExpensiveCalculation number={number} />
    </div>
  );
};

export default App;

Dalam contoh ini, useMemo memastikan bahawa pengiraan faktorial hanya dikira semula apabila nombor berubah.

gunakanPanggil balik

useCallback ialah cangkuk yang menghafal fungsi, menghalang rekreasinya pada setiap pemaparan melainkan salah satu kebergantungannya berubah. Ia berguna untuk menghantar fungsi stabil kepada komponen kanak-kanak yang bergantung pada kesamaan rujukan.

Contoh:

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

const Button = React.memo(({ onClick, children }) => {
  console.log(`Rendering button - ${children}`);
  return <button onClick={onClick}>{children}</button>;
});

const App = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => setCount((c) => c + 1), []);

  return (
    <div>
      <Button onClick={increment}>Increment</Button>
      <p>Count: {count}</p>
    </div>
  );
};

export default App;

Dalam contoh ini, useCallback memastikan bahawa fungsi kenaikan hanya dicipta semula jika kebergantungannya berubah, menghalang pemaparan semula komponen Butang yang tidak perlu.

Kesimpulan

Menguasai React Hooks dan kaedah kitaran hayat adalah penting untuk membina aplikasi yang teguh dan boleh diselenggara. Dengan memahami dan menggunakan cangkuk seperti useState, useEffect, useContext dan useReducer, serta corak lanjutan seperti cangkuk tersuai dan pengoptimuman prestasi dengan useMemo dan useCallback, anda boleh mencipta aplikasi React yang cekap dan berskala. Sebagai pembangun peringkat pertengahan, kemahiran ini akan meningkatkan keupayaan anda dengan ketara untuk membangunkan dan mengekalkan aplikasi React yang berkualiti tinggi, menjadikan anda aset yang tidak ternilai kepada pasukan anda.

Atas ialah kandungan terperinci Tahap pertengahan: Kaedah Kitar Hayat dan Cangkuk dalam Reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

if count for using class number function dom this Access
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:menyepadukan model AI tersuai ke dalam Wix Studio baharu atau dikemas kiniArtikel seterusnya:menyepadukan model AI tersuai ke dalam Wix Studio baharu atau dikemas kini

Artikel berkaitan

Lihat lagi