State và Props trong React: Hướng dẫn cơ bản cho người mới

Khi bạn biết đến React, chắc hẳn bạn cũng đã nghe rất nhiều về state và props. Đây không phải là những thuật ngữ phức tạp. Với state và props sẽ giúp tạo ra những component có thể tái sử dụng.

Nếu bạn đang học cách tạo ra những ứng dụng đầu tiên với React, việc nắm vững state và props sẽ là chìa khóa để mở khoá tiềm năng với thư viện này. Cùng mình đi tìm hiểu nó nhé!

1. State là gì?

State trong React là một đối tượng lưu trữ dữ liệu nội bộ của một component và có thể thay đổi theo thời gian. Khi state của một component thay đổi, React sẽ tự động cập nhật lại giao diện để phản ánh những thay đổi đó.

State thường được sử dụng để quản lý các dữ liệu động trong ứng dụng, chẳng hạn như giá trị đầu vào của người dùng, dữ liệu từ API hoặc các trạng thái khác thay đổi trong quá trình sử dụng ứng dụng.

Mình sẽ lấy ví dụ đơn giản về thiết lập bộ đếm như này:

import React from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = React.useState<number>(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Counter;

• useState: dùng hook useState với kiểu dữ liệu number. Biến count sẽ giữ giá trị của bộ đếm, và setCount sẽ thay đổi giá trị này mỗi khi bạn nhấn button.
• Khi giá trị của count thay đổi, React sẽ render lại component để hiển thị giá trị mới.

2. Props là gì?

Props (viết tắt của "Properties") là các tham số được truyền từ component cha xuống component con để hiển thị dữ liệu hoặc cấu hình component con. Props là dữ liệu bất biến, nghĩa là chúng không thể được thay đổi bởi component nhận props.

Nếu như state là trái tim của component, thì props là cách các component "giao tiếp" với nhau. Với props bạn có thể truyền dữ liệu từ component cha xuống component con, giúp tạo nên tính linh hoạt và tái sử dụng.

Ví dụ: truyền props từ component cha đến các component con.

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

const App: React.FC = () => {
  return (
    <div>
      <Greeting name="Hello" />
      <Greeting name="200Lab" />
    </div>
  );
};

export default App;

• GreetingProps: đây là kiểu dữ liệu mô tả các props mà component Greeting sẽ nhận. Trong trường hợp này, name là chuỗi string.
• Component App truyền props name đến từng instance của Greeting, và mỗi instance sẽ hiển thị thông điệp Hello với name khác nhau.

3. Sự khác biệt giữa State và Props

4. Khi nào nên sử dụng State và Props

4.1 Khi nào nên sử dụng State

Sử dụng State khi bạn cần quản lý dữ liệu nội bộ của component mà có thể thay đổi trong quá trình sử dụng. Ví dụ như:

• Số lần click: khi người dùng click vào button, số lần bấm sẽ thay đổi và được hiển thị trên màn hình.
• Trạng thái bật/tắt (toggle): ví dụ như công tắc bật/tắt theme, mỗi lần người dùng click vào, trạng thái sẽ thay đổi giữa bật và tắt.
• Giá trị form input: khi người dùng nhập thông tin vào form (như tên, email, password), state sẽ lưu trữ giá trị hiện tại của các input đó và cập nhật khi người dùng thay đổi.
  Trong ứng dụng TODO, bạn có thể dùng state để lưu danh sách list công việc mà người dùng thêm vào.
  Mỗi lần người dùng thêm hoặc xóa công việc, state sẽ được update => giao diện thay đổi để hiển thị danh sách mới.

4.2 Khi nào nên sử dụng Props

Sử dụng Props khi bạn muốn truyền dữ liệu từ component cha xuống component con, điều này sẽ giúp bạn có một component tái sử dụng với các dữ liệu khác nhau. Sử dụng props giúp bạn tạo ra các component con linh hoạt mà không cần phải thay đổi nội dung bên trong chúng.

Tình huống sử dụng:

• Component hiển thị: component nhận dữ liệu từ cha như là tên người dùng, hình ảnh, hoặc trạng thái để hiển thị trên màn hình,...
• Component tái sử dụng: component Button dùng để hiển thị nhiều loại nút khác nhau, bạn có thể sử dụng props để truyền các thuộc tính như màu sắc, kích thước, hoặc hành động onClick,...
• Ví dụ: Bạn có một component Card để hiển thị thông tin sản phẩm. Component cha có thể truyền tên sản phẩm, giá, và hình ảnh thông qua props cho Card => mỗi Card có thể hiển thị nội dung khác nhau mà không cần thay đổi bên trong component con.

5. Kết luận

Hiểu rõ và sử dụng thành thạo state và props là chìa khóa để bạn "giải mã" sức mạnh của React. Hy vọng qua bài viết này các bạn đã nắm được khái niệm về state và props cũng như cách áp dụng chúng vào dự án của riêng bạn.

Các bài viết liên quan:

• Vite là gì? Hướng dẫn Khởi tạo dự án React với Vite
• ReactJS là gì? Thư viện Javascript tối ưu cho giao diện Web
• React Router Dom là gì? Cách điều hướng trong ứng dụng React
• CSS Modules là gì? Giải pháp quản lý Styles trong dự án