✅ Checkpoint: component, JSX, props và state

By Better Wise

Quiz

  1. Trong JSX, cách viết nào đúng để gắn handler cho sự kiện click?
    • <button onClick="handleClick">Bấm</button>
    • <button onclick="handleClick()">Bấm</button>
    • <button onClick={handleClick}>Bấm</button>
    • <button onClick={handleClick()}>Bấm</button>
  2. Vì sao đoạn code sau không cộng đúng 2 lần? setCount(count + 1); setCount(count + 1);
    • Vì phải dùng count++ thay cho count + 1
    • Vì setCount chỉ được gọi một lần mỗi handler
    • Vì React gom các lần cập nhật, cả hai dòng đều đọc cùng một giá trị count cũ trong lần render đó
    • Vì count là props nên không thể thay đổi
  3. Cách cập nhật đúng khi state là object user = { name: "Bình", age: 20 } và bạn muốn đổi name thành "An"?
    • user = { ...user, name: "An" };
    • setUser({ ...user, name: "An" });
    • setUser(user.name = "An");
    • user.name = "An";
  4. Khi render danh sách bằng map(), React dùng key để làm gì?
    • Để nhận diện phần tử nào giữ nguyên, phần tử nào mới hoặc bị xóa khi render lại
    • Để hiển thị key ra màn hình cạnh mỗi phần tử
    • Để sắp xếp danh sách theo thứ tự alphabet
    • Để truyền dữ liệu vào component con qua props
  5. Vì sao không nên dùng index làm key khi danh sách có thể chèn, xóa hoặc sắp xếp lại?
    • Vì index không duy nhất trong danh sách
    • Vì index làm chậm tốc độ tải trang
    • Vì index luôn là số nên React không chấp nhận
    • Vì index đổi theo vị trí nên React có thể gán nhầm state hoặc DOM của phần tử cũ cho phần tử mới
  6. Để render mảng fruits thành danh sách trong JSX, ta gọi phương thức ____ trên mảng và trả về JSX cho mỗi phần tử.
  7. Với dữ liệu lấy từ API, nguồn key tốt nhất cho mỗi phần tử là ____ của bản ghi.
  8. Hãy tự đánh giá: bạn có thể viết một component nhỏ (ví dụ danh sách công việc) dùng useState, xử lý sự kiện click/change và render danh sách có key ổn định không? Tự chấm theo các tiêu chí sau.

Sign in to submit answers.