Peringkat junior: Kaedah Kitar Hayat dan Cangkuk dalam Reaksi

React Hooks telah merevolusikan cara kami menulis komponen berfungsi dalam React, membolehkan kami menggunakan keadaan dan ciri React yang lain tanpa menulis kelas. Panduan ini akan memperkenalkan anda kepada cangkuk penting, cangkuk tersuai dan corak cangkuk lanjutan untuk mengurus keadaan kompleks dan mengoptimumkan prestasi.

Pengenalan kepada React Hooks

React Hooks ialah fungsi yang membolehkan anda "mencantumkan" ciri keadaan React dan kitaran hayat daripada komponen berfungsi. Cangkuk telah diperkenalkan dalam React 16.8, dan ia menyediakan cara yang lebih langsung untuk menggunakan keadaan dan ciri React yang lain dalam komponen berfungsi.

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 ringkas dan lebih mudah dibaca.
2. Guna Semula Logik:Cangkuk tersuai membolehkan anda mengekstrak dan menggunakan semula logik stateful merentas berbilang komponen.
3. Komponen Fungsian Dipertingkat:Cangkuk memberikan semua kuasa komponen kelas, seperti menguruskan 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 ( 
 
You clicked {count} times
  setCount(count + 1)}>Click me 
 ); }; 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 ( 
 {data ? 
{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 
The current theme is {theme}
; }; 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 ( 
 
Count: {state.count}
  dispatch({ type: 'increment' })}>Increment  dispatch({ type: 'decrement' })}>Decrement 
 ); }; export default Counter;

Dalam contoh ini, useReducer menguruskan 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 ( 
 {data ? 
{JSON.stringify(data, null, 2)}
: 'Loading...'}
      
); }; export default DataFetcher;
      

       Salin selepas log masuk
      
     

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

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 ( 
 
Count: {state.count}
  dispatch({ type: 'increment' })}>Increment  dispatch({ type: 'decrement' })}>Decrement 
 ); }; export default Counter;

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

Mengoptimumkan Prestasi dengan useMemo dan useCallback

gunakanMemo

useMemo ialah cangkuk yang memoize 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 
Factorial of {number} is {factorial}
; }; const App = () => { const [number, setNumber] = useState(5); return ( 
  setNumber(parseInt(e.target.value, 10))} />  
 ); }; 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 {children}; }); const App = () => { const [count, setCount] = useState(0); const increment = useCallback(() => setCount((c) => c + 1), []); return ( 
 Increment 
Count: {count}
 
 ); }; 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

Memahami dan menggunakan React Hooks adalah penting untuk pembangunan React moden. Cangkuk membolehkan anda menulis kod yang lebih bersih dan boleh diselenggara dalam komponen berfungsi. Dengan menguasai cangkuk penting seperti useState, useEffect, useContext dan useReducer, serta corak lanjutan seperti cangkuk tersuai dan pengoptimuman prestasi dengan useMemo dan useCallback, anda boleh membina aplikasi React yang mantap dan cekap. Sebagai pembangun junior, selesa dengan konsep ini akan meningkatkan keupayaan anda dengan ketara untuk membangunkan dan mengekalkan aplikasi React yang berkualiti tinggi.

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