Trung cấp ⏱️ 21:30 🔥 Nổi bật

React: component, state và props

React tổ chức giao diện thành các "mảnh" nhỏ gọi là component. Dữ liệu chảy từ cha xuống con qua props, và trạng thái riêng của từng mảnh nằm ở state. Nắm ba khái niệm này là nắm React.

Component là gì

Component là một hàm trả về JSX — “HTML viết trong JavaScript”. Mỗi component là một mảnh UI có tên, tái dùng được ở nhiều nơi.

// File: TodoItem.jsx
// Một component nhận props từ cha
export default function TodoItem({ todo, onToggle }) {
  return (
    <label style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
      <input
        type="checkbox"
        checked={todo.done}
        onChange={() => onToggle(todo.id)}
      />
      {todo.title}
    </label>
  );
}

Props: dữ liệu đi xuống

Props là tham số truyền từ component cha vào con. Quy tắc bất biến: con không được sửa props. Muốn thay đổi, con phải gọi callback mà cha truyền xuống.

Đây là câu thần chú của React: cha truyền dữ liệu xuống con (props), con báo việc lên cha bằng cách gọi hàm (onToggle, onSubmit…). Ngược chiều là vi phạm luồng dữ liệu một chiều.

State: dữ liệu tự thay đổi

useState cho component một “kho nhớ” riêng. Thay đổi state bằng setter sẽ khiến component render lại. Lưu ý: đừng sửa trực tiếp, luôn tạo giá trị mới.

// File: TodoApp.jsx
import { useState } from 'react';

export default function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState('');

  function addTodo() {
    // Luôn tạo mảng mới, không push vào mảng cũ
    setTodos([...todos, { id: Date.now(), title: text, done: false }]);
    setText('');
  }

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={addTodo}>Thêm</button>
    </div>
  );
}

Khái niệm	Đặc điểm	Ai sở hữu
Props	Bất biến, đọc từ cha truyền xuống	Cha
State	Thay đổi được qua setter, render lại UI	Component đó
Effect (useEffect)	Chạy sau render, cho side-effect như fetch	Component đó

❓ Con cần đổi giá trị của một dữ liệu đang ở cha. Cách đúng là gì?