Bạn thích Hooks nào? Hãy tạo một Hooks bất kỳ.

{{FormatNumbertoThousand(model.total_like)}} lượt thích
7.061 lượt xem
Reactjs basic
Người phỏng vấn muốn thấy: bạn sử dụng Hooks và hiểu cách nó hoạt động như thế nào.

Mặc dù Hooks mới được giới thiệu từ React 16.8, nhưng đã có nhiều người sử dụng nó trong sản phẩm của họ và họ mong đợi bạn biết nó.

Chúng ta hãy tạo 1 hook “useWindowSize” – đây là một hook khá đơn giản và dễ hiểu.

import { useState, useEffect } from 'react';
const useWindowSize = () => {
  const getSize = () => ({
    width: window.innerWidth,
    height: window.innerHeight
  });
  const [size, setSize] = useState(getSize);
  useEffect(() => {
    const handleResize = () => setSize(getSize());
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return size;
}

Cách dùng:

const App = () => {
  const size = useWindowSize();
  return (
    <div>
      {size.width}px / {size.height}px
    </div>
  );
}

Bạn có thể sẽ nhận được thêm vài câu hỏi như sau:

1. Có cần thiết phải đặt tên hook của bạn là “useWindowSize” không, đặt tên khác ví dụ như “getWindowSize” thì sao?

Nó là cần thiết, vì theo rules of Hooks, tên hook luôn phải bắt đầu với từ “use”.

2. Nó có hoạt động không nếu chúng ta bỏ “[]” khỏi “useEffect”?

Nó vẫn hoạt động, nhưng nó sẽ gọi hook “useEffect” mỗi lần render, điều này sẽ làm gây ra các vấn đề về performance.

3. Làm sao React biết khi nào sẽ re-render component “App” nếu chúng ta xử lý window resizing trong “useWindowSize”?

Khi chúng ta gọi “setSize” bên trong hook “useWindowSize”, React biết hook đó được dùng trong component “App” và sẽ re-render nó.

Check out Why Do React Hooks Rely on Call Order?  for more info.

4. Làm sao để hook này không bị lỗi khi dùng ở Server-Side render?

import { useState, useEffect } from 'react';
const useWindowSize = () => {
  const isClient = typeof window === 'object';  
  const getSize = () => ({
    width: isClient ? window.innerWidth : undefined,
    height: isClient ? window.innerHeight : undefined
  });
  const [size, setSize] = useState(getSize);
  useEffect(() => {
    const handleResize = () => setSize(getSize());
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return size;
}

 

Một số chủ đề thú vị có thể bạn thích:

- Giới thiệu useState và useEffect-useRef trong React Hooks

Câu hỏi tiếp theo: React hoạt động như thế nào?
{{login.error}}