Bạn thích hooks
nào trong React? Hãy mô tả cách tạo một hooks
bất kỳ.
Bạn thích hooks
nào trong React? Hãy mô tả cách tạo một hooks
bất kỳ.
Trong React, Hooks là một tính năng được giới thiệu từ phiên bản 16.8, cho phép bạn sử dụng state và các tính năng React khác mà không cần phải viết một class. Hooks mang lại nhiều lợi ích như việc giúp code trở nên gọn gàng hơn, dễ đọc và dễ bảo trì hơn. Một trong những Hooks mà tôi thích nhất là useState
vì nó cung cấp một cách đơn giản để thêm trạng thái local vào trong function components.
useState
useState
là một Hook cơ bản cho phép bạn thêm trạng thái React vào trong function components. Khi bạn gọi useState
trong một function component, React sẽ giữ giá trị này giữa các lần re-render của component.
Để sử dụng useState
, bạn chỉ cần nhập nó từ React và gọi nó trong function component của mình:
import React, { useState } from 'react';
function Counter() {
// Khai báo một biến state mới, chúng ta gọi là "count"
const [count, setCount] = useState(0);
return (
<div>
<p>Bạn đã click {count} lần</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Trong ví dụ trên, useState
được gọi với giá trị khởi tạo là 0
. Nó trả về một mảng với hai phần tử: giá trị hiện tại của trạng thái (count
) và một hàm cho phép cập nhật giá trị đó (setCount
). Khi bạn click vào nút, hàm setCount
được gọi, dẫn đến việc component được re-render với giá trị mới của count
.
Custom Hooks cho phép bạn tạo ra các Hooks riêng của mình, giúp tái sử dụng logic trạng thái giữa các components mà không cần phải dùng đến các pattern cao cấp như render props hay higher-order components.
Giả sử bạn muốn tạo một Hook để theo dõi vị trí chuột trong một component:
import { useState, useEffect } from 'react';
function useMousePosition() {
const [mousePosition, setMousePosition] = useState({ x: null, y: null });
useEffect(() => {
function handleMouseMove(event) {
setMousePosition({
x: event.clientX,
y: event.clientY
});
}
window.addEventListener('mousemove', handleMouseMove);
return () => {
window.removeEventListener('mousemove', handleMouseMove);
};
}, []);
return mousePosition;
}
Trong ví dụ trên, useMousePosition
là một Custom Hook sử dụng useState
để lưu trữ vị trí chuột và useEffect
để thiết lập và dọn dẹp event listener. Bất kỳ component nào sử dụng useMousePosition
sẽ có thể truy cập vào vị trí chuột hiện tại.
Tóm lại, Hooks trong React là một tính năng mạnh mẽ giúp bạn sử dụng state và các tính năng React khác trong function components. useState
là một Hook cơ bản giúp quản lý trạng thái local, trong khi bạn cũng có thể tạo Custom Hooks để tái sử dụng logic trạng thái giữa các components.
middle
Gợi ý câu hỏi phỏng vấn
Chưa có bình luận nào