Mối quan hệ giữa Props và State trong Reactjs

Giới thiệu

Trong Reactjs, có hai cách để truyền dữ liệu giữa các thành phần: props và state. Trong bài đăng này, chúng ta sẽ tìm hiểu về hai khái niệm này và cách chúng ta có thể sử dụng chúng để tạo ra các ứng dụng phức tạp.

Props là gì?

Props là viết tắt của thuộc tính và là một cách để truyền dữ liệu từ một thành phần cha đến một thành phần con. Các props là không thể thay đổi từ phía con của thành phần. Thay vào đó, chúng ta phải truyền các props mới vào thành phần để thay đổi nó.

State là gì?

State là một đối tượng chứa các trạng thái của một thành phần. Các trạng thái này có thể thay đổi theo thời gian và có thể ảnh hưởng đến cách thành phần hiển thị nó trên giao diện người dùng.

Cách chuyển dữ liệu giữa các thành phần sử dụng props

Chúng ta có thể truyền dữ liệu giữa các thành phần trong ReactJS bằng cách sử dụng props. Ví dụ, nếu chúng ta muốn truyền một số lượng từ một thành phần cha đến một thành phần con, chúng ta có thể sử dụng props để truyền giá trị đó.

Ví dụ:

// Thành phần cha
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const quantity = 10;
  return (
    <ChildComponent quantity={quantity} />
  );
}

// Thành phần con
import React from 'react';

function ChildComponent(props) {
  return (
    <p>Số lượng: {props.quantity}</p>
  );
}

Ở đây, chúng ta đã truyền số lượng từ thành phần cha ParentComponent tới thành phần con ChildComponent bằng cách sử dụng props. Số lượng được truyền dưới dạng thuộc tính quantity và được sử dụng trong thành phần con để hiển thị giá trị.

Các props được truyền vào thành phần con bằng cách sử dụng các thuộc tính HTML. Trong ví dụ trên, thuộc tính quantity được sử dụng để truyền giá trị từ thành phần cha tới thành phần con.

Cách xử lý tương tác người dùng và cập nhật trạng thái tương ứng

Để xử lý tương tác người dùng trong Reactjs, chúng ta có thể sử dụng các sự kiện và phương thức được cung cấp bởi Reactjs. Ví dụ, chúng ta có thể sử dụng sự kiện onClick để xử lý người dùng nhấp vào một nút, và sau đó cập nhật trạng thái của thành phần tương ứng.

Dưới đây là ví dụ:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Đếm: {count}</p>
      <button onClick={handleClick}>Tăng</button>
    </div>
  );
}

Trong ví dụ này, chúng ta đã tạo một thành phần Counter mà có một biến trạng thái được gọi là count. Chúng ta cũng đã định nghĩa một hàm handleClick để cập nhật biến trạng thái count khi người dùng nhấp vào nút.

Sự kiện onClick được sử dụng trong phần tử button để gọi hàm handleClick khi người dùng nhấp vào nút. Điều này cập nhật biến trạng thái count, dẫn đến việc thành phần được vẽ lại với giá trị đếm được cập nhật.

Tổng thể, sử dụng các sự kiện và phương thức trong Reactjs là một cách mạnh mẽ để xử lý tương tác người dùng và cập nhật trạng thái của các thành phần tương ứng.

Sự khác biệt giữa props và state và khi nào sử dụng mỗi cái

Sự khác biệt giữa props và state là props được sử dụng để truyền dữ liệu từ một thành phần cha đến một thành phần con, trong khi state được sử dụng để lưu trữ trạng thái của một thành phần. Chúng ta nên sử dụng props khi chúng ta muốn truyền dữ liệu giữa các thành phần, và nên sử dụng state khi chúng ta muốn lưu trữ trạng thái của một thành phần.

Trong bài đăng này, chúng ta đã tìm hiểu về mối quan hệ giữa props và state trong Reactjs trên phiên bản mới nhất. Chúng ta đã bao quát các khái niệm cơ bản của hai khái niệm này và cách chúng ta có thể sử dụng chúng để tạo ra các ứng dụng phức tạp.