Trong lập trình React, khái niệm props là một phần không thể thiếu để thiết kế web, đặc biệt là các ứng dụng web mạnh mẽ và linh hoạt. Vậy props là gì, làm sao để sử dụng props được hợp lý và hiệu quả nhất? Hãy cùng LPTech tìm hiểu qua bài viết này nhé!

Props là gì?

Props (viết tắt của "properties") là một cơ chế trong React cho phép truyền dữ liệu từ component cha xuống component con. Props giúp các component trở nên linh hoạt hơn khi có thể nhận và sử dụng các giá trị từ bên ngoài thay vì chỉ làm việc với dữ liệu tĩnh. Nhờ vào props, các component có thể chia sẻ thông tin mà không cần phải làm việc trực tiếp với nhau.

Props là một đối tượng bất biến, có nghĩa là bạn không thể thay đổi giá trị của chúng trong component con. Điều này giúp bảo vệ sự toàn vẹn của dữ liệu và tránh các lỗi phát sinh khi dữ liệu bị thay đổi ngoài ý muốn.

Ví dụ về một Props trong React để truyền dữ liệu từ component cha xuống các component con:

jsx

import React from 'react';

// Component con

function Welcome(props) {

return <h1>Xin chào, {props.name}</h1>;

}

// Component cha

function App() {

return (

<div>

<Welcome name="Alice" />

<Welcome name="Bob" />

</div>

);

}

Với ví dụ trên đây, component cha là App và component con là Welcome. Trong component cha, các component được truyền vào thông qua các giá trị tương ứng là ‘name’. Lúc này, khi component con nhận được giá trị ‘name’, hệ thống sẽ dùng nó để hiển thị lời chào hỏi theo tên người dùng tương ứng.

Sử dụng props thế nào cho hợp lý?

Để sử dụng props hiệu quả, bạn cần lưu ý một số điểm sau:

• Truyền dữ liệu một chiều: Props luôn được truyền từ component cha xuống component con, điều này đảm bảo dữ liệu không bị thay đổi từ component con, giúp duy trì tính toàn vẹn.
• Đảm bảo tính tái sử dụng: Khi bạn cần sử dụng một giá trị trong nhiều component khác nhau, thay vì hardcode (mã hóa cố định) giá trị trong từng component, bạn có thể truyền giá trị đó thông qua props, giúp mã nguồn dễ duy trì và mở rộng.
• Đặt tên props rõ ràng: Đặt tên props sao cho dễ hiểu và mô tả chính xác dữ liệu mà chúng chứa. Điều này giúp bạn và đồng nghiệp dễ dàng làm việc với mã nguồn.
• Chú ý đến kiểu dữ liệu của props: Bạn có thể sử dụng PropTypes hoặc các công cụ kiểm tra kiểu dữ liệu khác để đảm bảo rằng các props được truyền vào đúng kiểu, giúp giảm thiểu lỗi khi chạy ứng dụng.

Cách sử dụng Props trong Component

Khi sử dụng props trong React, bạn cần tuân theo một số bước cơ bản để truyền và nhận dữ liệu giữa các component:

Truyền Props từ Component Cha: Trong component cha, bạn có thể truyền giá trị vào props khi gọi component con. Ví dụ:

function ParentComponent() {

return <ChildComponent name="John" age={30} />;

}

Nhận Props trong Component Con: Component con có thể nhận props thông qua đối số trong hàm của component. Props có thể được truy cập như một đối tượng.

function ChildComponent(props) {

return <p>{props.name} is {props.age} years old.</p>;

}

Sử dụng Destructuring: Để code trở nên dễ đọc hơn, bạn có thể sử dụng destructuring để truy xuất trực tiếp các giá trị từ props.

function ChildComponent({ name, age }) {

return <p>{name} is {age} years old.</p>;

}

Tại sao người dùng không nên thay đổi Props?

Props được thiết kế là bất biến (immutable), tức là chúng không nên bị thay đổi trong component con. Lý do là vì việc thay đổi props có thể gây ra nhiều vấn đề khó lường:

Immutable Data (Dữ liệu không thay đổi)

Props trong React được thiết kế để không thể thay đổi. Điều này giúp bảo đảm tính ổn định và dễ dàng theo dõi khi dữ liệu di chuyển từ component cha sang component con. Nếu Props bị thay đổi, sẽ gây ra sự không nhất quán và làm ứng dụng trở nên khó hiểu.

Single Source of Truth (Nguồn dữ liệu duy nhất)

Props là nguồn dữ liệu duy nhất mà các component con có thể sử dụng. Việc thay đổi Props từ bên ngoài sẽ phá vỡ tính ổn định của nguồn dữ liệu này, dẫn đến việc khó quản lý và hiểu được dữ liệu.

Predictability and Debugging (Dễ dự đoán và dễ gỡ lỗi)

Khi Props không thay đổi, việc theo dõi dữ liệu trở nên dễ dàng hơn và giúp việc gỡ lỗi trở nên đơn giản hơn. Nếu Props có thể thay đổi bất kỳ lúc nào, việc xác định nguyên nhân của lỗi sẽ trở nên phức tạp và mất thời gian.

Mặc dù có một số tình huống đặc biệt yêu cầu thay đổi Props, nhưng tốt nhất là tránh thay đổi Props trong hầu hết các trường hợp. Điều này giúp bảo vệ tính toàn vẹn của dữ liệu và duy trì tính nhất quán trong ứng dụng. Thay vào đó, bạn nên sử dụng state hoặc callback functions để tương tác với dữ liệu và xử lý sự kiện trong React.

State là gì?

State trong React là một cơ chế quản lý dữ liệu trong component, cho phép bạn lưu trữ và thay đổi dữ liệu khi cần thiết. Khác với props, state có thể thay đổi trong suốt vòng đời của component và khi state thay đổi, React sẽ tự động re-render component để cập nhật giao diện người dùng.

State thường được sử dụng khi dữ liệu cần thay đổi trong quá trình tương tác của người dùng, ví dụ như khi người dùng nhập liệu vào form, nhấp vào nút, hay khi có sự thay đổi nào trong ứng dụng.

State có liên hệ thế nào với Props?

State và props đều là cơ chế để lưu trữ và truyền tải dữ liệu trong React, nhưng chúng có những khác biệt rõ rệt:

• Props: Được truyền từ component cha xuống component con và không thể thay đổi trong component con.
• State: Được quản lý trong mỗi component và có thể thay đổi trong suốt vòng đời của component.

Mặc dù props không thể thay đổi trong component con, nhưng chúng có thể ảnh hưởng đến state. Ví dụ, bạn có thể sử dụng giá trị từ props để khởi tạo state trong component con hoặc thay đổi state dựa trên giá trị của props.

Thời điểm nên dùng state

State nên được sử dụng trong các tình huống sau:

Quản lý trạng thái nội bộ của component

Khi một component cần lưu trữ dữ liệu chỉ có giá trị trong phạm vi của chính nó, không cần chia sẻ với các component khác, việc sử dụng State là giải pháp thích hợp. Ví dụ, trong một form nhập liệu, bạn có thể sử dụng State để lưu trữ dữ liệu người dùng nhập vào, hoặc một biểu đồ có thể dùng State để lưu giữ các thông số cấu hình hiển thị.

Tương tác người dùng

Khi cần theo dõi và cập nhật dữ liệu dựa trên các hành động của người dùng như nhấn nút, nhập liệu hoặc thao tác kéo thả, bạn có thể sử dụng State để cập nhật giao diện và tái render các thành phần tương ứng.

Thay đổi trạng thái theo thời gian

Nếu dữ liệu của component cần thay đổi liên tục theo thời gian, ví dụ như dữ liệu được lấy từ nguồn bên ngoài hoặc cập nhật bởi các yếu tố khác, State sẽ giúp bạn theo dõi và cập nhật thông tin một cách linh hoạt và hiệu quả.

Quản lý form và thông tin nhập từ người dùng

Khi cần kiểm soát và đảm bảo tính chính xác của thông tin đầu vào từ người dùng, chẳng hạn như các trường trong form, việc sử dụng State sẽ giúp bạn dễ dàng theo dõi và cập nhật các giá trị nhập vào một cách hiệu quả.

Cách sử dụng State như thế nào?

Để sử dụng state trong React, bạn có thể sử dụng hook useState trong các component chức năng. Đây là cách khởi tạo và thay đổi state trong một component:

Khởi tạo state

Bắt đầu sử dụng state với việc khởi tạo state của một lớp component bất kỳ, ví dụ:

jsx

import React, { Component } from 'react';

class Counter extends Component {

constructor(props) {

super(props);

this.state = {

count: 0

};

}

}

Sử dụng state trong giao diện

Bạn có thể sử dụng giá trị state trực tiếp trong JSX để thay đổi giao diện:

jsx

render() {

return <div>Count: {this.state.count}</div>;

}

Với functional component:

jsx

return <div>Count: {count}</div>;

Cập nhật state

Khi bạn muốn thay đổi giá trị của state, bạn sử dụng hàm setter (trong ví dụ trên là setCount):

jsx

this.setState({ count: this.state.count + 1 });

Trong functional component:

jsx

setCount(count + 1);

Có thể thấy, việc hiểu rõ khái niệm và cách sử dụng props và state trong React là rất quan trọng để phát triển các ứng dụng web hiệu quả và dễ bảo trì. Props giúp truyền dữ liệu giữa các component, còn state giúp quản lý dữ liệu có thể thay đổi trong từng component. Bằng cách sử dụng đúng props và state, bạn sẽ có thể xây dựng các ứng dụng React mạnh mẽ, dễ mở rộng và tối ưu hiệu suất. 

Nếu thấy bài viết hay hãy chia sẻ ngay đến đồng nghiệp của mình và đón đọc nhiều kiến thức lập trình chuyên sâu hơn từ LPTech nhé!