Tahap pertengahan: Kaedah Kitar Hayat dan Cangkuk dalam Reaksi

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;

Salin selepas log masuk

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;

Salin selepas log masuk