Bài viết này sẽ giới thiệu với bạn về các Hook phổ biến trong React và cách sử dụng chúng để quản lý state, xử lý vòng đời của component, tối ưu hóa performance và nhiều hơn nữa.
Chúng ta sẽ điểm qua các Hook như useState, useEffect, useContext, useMemo, useCallback, useRef và useReducer, đồng thời cung cấp cho bạn các ví dụ minh họa để giúp bạn hiểu rõ hơn về cách sử dụng các Hook này trong ứng dụng của mình. Bạn sẽ có thể áp dụng các kỹ thuật này để tạo ra các ứng dụng React linh hoạt và tiện lợi hơn.
Nếu bạn là một lập trình viên React mới bắt đầu hoặc muốn nâng cao kỹ năng của mình về React, bài viết này chắc chắn sẽ giúp ích cho bạn!
Dưới đây là một số Hook phổ biến trong React:
- useState là một trong những hook phổ biến nhất trong React. Nó được sử dụng để quản lý trạng thái của một component và cho phép bạn thay đổi trạng thái đó một cách dễ dàng. Cụ thể, useState cho phép bạn tạo ra một biến state và một hàm setter để thay đổi giá trị của biến state đó. Mỗi khi bạn gọi hàm setter, React sẽ tự động render lại component và cập nhật trạng thái mới đến giao diện người dùng.
Ví dụ:
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={handleClick}>Click me</button>
</div>
);
}
Trong ví dụ trên, chúng ta đã sử dụng useState để tạo ra một biến state có tên là count và một hàm setter có tên là setCount. Ban đầu, giá trị của count được đặt là 0 bằng cách truyền đối số 0 vào hàm useState. Trong hàm handleClick, chúng ta đã sử dụng hàm setter setCount để tăng giá trị của biến state count lên một đơn vị mỗi khi người dùng nhấp vào nút "Click me". Sau đó, chúng ta hiển thị giá trị của biến state count lên giao diện người dùng.
Bạn cũng có thể sử dụng một mảng để lưu trữ nhiều giá trị state trong một component. Ví dụ:
import React, { useState } from 'react';
function Example() {
const [name, setName] = useState('John');
const [age, setAge] = useState(30);
function handleNameChange(e) {
setName(e.target.value);
}
function handleAgeChange(e) {
setAge(e.target.value);
}
return (
<div>
<p>Name: {name}</p>
<input type="text" value={name} onChange={handleNameChange} />
<p>Age: {age}</p>
<input type="number" value={age} onChange={handleAgeChange} />
</div>
);
}
-
useEffect: Hook này được sử dụng để thực hiện các tác vụ liên quan đến side-effect, như tải dữ liệu từ server, đăng ký các sự kiện của DOM, hoặc cập nhật title của trang. useEffect nhận vào hai tham số là một callback function để thực hiện các tác vụ side-effect và một mảng dependencies để xác định khi nào useEffect sẽ được kích hoạt.
Ví dụ:
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Trong ví dụ trên, useEffect được sử dụng để cập nhật title của trang mỗi khi giá trị của state count thay đổi.
-
useContext: Hook này được sử dụng để truy cập context được tạo bởi Provider trong React. Context cho phép truyền dữ liệu từ component cha đến các component con mà không cần thông qua các props. useContext nhận vào một tham số là context và trả về giá trị hiện tại của context.
Ví dụ:
import React, { useContext } from 'react';
const UserContext = React.createContext('unknown');
function Header() {
const user = useContext(UserContext);
return (
<header>
<p>Welcome, {user}!</p>
</header>
);
}
function Example() {
return (
<UserContext.Provider value="John">
<div>
<Header />
</div>
</UserContext.Provider>
);
}
-
useMemo: Hook này được sử dụng để tối ưu hóa performance của ứng dụng bằng cách cache kết quả của một hàm tính toán, và chỉ tính toán lại khi các dependencies của nó thay đổi. useMemo nhận vào hai tham số là hàm tính toán và mảng dependencies.
Ví dụ:
import React, { useMemo } from 'react';
function expensiveCalculation(number) {
console.log('Expensive calculation');
let result = 0;
for (let i = 0; i < number; i++) {
result += i;
}
return result;
}
function Example() {
const [number, setNumber] = useState(10);
const result = useMemo(() => {
return expensiveCalculation(number);
}, [number]);
return (
<div>
<p>Result: {result}</p>
<button onClick={() => setNumber(number + 10)}>
Increase number
</button>
</div>
);
}
Trong ví dụ trên, useMemo được sử dụng để cache kết quả của hàm expensiveCalculation và chỉ tính toán lại khi giá trị của state number thay đổi.
-
useCallback: Hook này cũng được sử dụng để tối ưu hóa performance của ứng dụng bằng cách cache một hàm callback, và chỉ thay đổi khi các dependencies của nó thay đổi. useCallback nhận vào hai tham số là hàm callback và mảng dependencies.
Ví dụ:
import React, { useState, useCallback } from 'react';
function Child({ handleClick }) {
console.log('Rendering Child');
return <button onClick={handleClick}>Click me</button>;
}
function Parent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
console.log('Button clicked');
setCount(count + 1);
}, [count]);
console.log('Rendering Parent');
return (
<div>
<p>Count: {count}</p>
<Child handleClick={handleClick} />
</div>
);
}
Trong ví dụ trên, useCallback được sử dụng để tránh việc Child component bị re-render khi Parent component được re-render, bằng cách tạo một phiên bản của handleClick function được memoize và chỉ tính toán lại khi giá trị của state count thay đổi.
- useRef: Hook này cho phép chúng ta lưu trữ tham chiếu đến một DOM element hoặc giá trị khác và truy cập nó từ các phương thức của component.
import React, { useRef } from 'react';
function Example() {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus();
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>
Focus input
</button>
</div>
);
}
Trong ví dụ trên, useRef được sử dụng để truy cập trực tiếp đối tượng DOM của input element thông qua thuộc tính ref, bằng cách sử dụng useRef để tạo một tham chiếu tới input element và sử dụng thuộc tính current để truy cập trực tiếp đối tượng DOM.
-
useReducer: Hook này được sử dụng để quản lý trạng thái của một component bằng cách sử dụng mô hình reducer của JavaScript. useReducer nhận vào hai tham số là reducer function và giá trị ban đầu của state, và trả về một mảng chứa giá trị hiện tại của state và hàm dispatch để thay đổi giá trị của state.
import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Example() {
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>
);
}
Trên đây là một số Hook phổ biến trong React và các ví dụ code minh họa cho mỗi Hook. Chúng ta có thể sử dụng các Hook này để quản lý state, xử lý các vòng đời của component, tối ưu hóa performance, và nhiều hơn nữa. Các Hook đã giúp cho việc sử dụng functional component trong React trở nên linh hoạt và tiện lợi hơn rất nhiều.