Câu hỏi phỏng vấn React.js
Câu hỏi

Bạn thích hooks nào trong React? Hãy mô tả cách tạo một hooks bất kỳ.

Câu trả lời

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.

Cách sử dụng

Để 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:

javascript Copy
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.

Tạo Custom Hooks

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.

Ví dụ về Custom Hook

Giả sử bạn muốn tạo một Hook để theo dõi vị trí chuột trong một component:

javascript Copy
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

middle

Gợi ý câu hỏi phỏng vấn

middle

Reselect là gì và nó hoạt động như thế nào?

middle

PureComponent trong React là gì?

middle

Higher-Order component trong React là gì?

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào