Tahap arkitek: Kaedah Kitar Hayat dan Cangkuk dalam Reaksi

Sebagai pembangun peringkat arkitek, anda bertanggungjawab untuk memastikan aplikasi anda teguh, boleh diselenggara dan berskala. Menguasai React Hooks dan kaedah kitaran hayat adalah penting untuk mencapai matlamat ini. Artikel ini merangkumi 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, yang diperkenalkan dalam React 16.8, membolehkan komponen berfungsi menggunakan keadaan dan ciri React yang lain. Cangkuk menyediakan pendekatan berfungsi dan modular untuk mengendalikan logik komponen, yang membawa kepada pangkalan kod yang lebih bersih dan boleh diselenggara.

Faedah Utama Cangkuk

1. Kod Lebih Bersih: Cangkuk menghapuskan keperluan untuk komponen kelas, menjadikan pangkalan kod lebih konsisten dan lebih mudah difahami.
2. Kebolehgunaan semula: Cangkuk tersuai membenarkan pengekstrakan dan penggunaan semula logik stateful merentas berbilang komponen.
3. Modulariti: Cangkuk menyediakan API yang mudah untuk mengurus keadaan komponen dan kesan sampingan, mempromosikan kod modular dan boleh diselenggara.

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 dan amat berguna apabila logik keadaan melibatkan berbilang sub-nilai atau apabila keadaan seterusnya bergantung pada yang sebelumnya.

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