Rumah >hujung hadapan web >tutorial js >Peringkat junior: Kaedah Kitar Hayat dan Cangkuk dalam Reaksi
Peringkat junior: Kaedah Kitar Hayat dan Cangkuk dalam Reaksi
- WBOYasal
- 2024-07-17 22:46:40874semak imbas
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 "menyangkut" keadaan React dan ciri 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
- 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.
- Guna Semula Logik: Cangkuk tersuai membolehkan anda mengekstrak dan menggunakan semula logik stateful merentas berbilang komponen.
- Komponen Fungsian Dipertingkat: Cangkuk memberikan semua kuasa 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...'}
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...'}
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
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, berasa selesa dengan konsep ini akan meningkatkan keupayaan anda untuk membangunkan dan mengekalkan aplikasi React berkualiti tinggi dengan ketara.
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!