Props là gì? Định nghĩa và cách sử dụng Props trong ReactJS

Props Là Gì? Đây là câu hỏi thường gặp của các lập trình viên mới bắt đầu với ReactJS hoặc React Native. Bài viết này sẽ giải thích chi tiết về Props, cách sử dụng và so sánh với State, giúp bạn nắm vững kiến thức nền tảng quan trọng này.

Props là gì? Định nghĩa chi tiết

Props là viết tắt của Properties. Nó tương tự như các attribute trong HTML. Ví dụ trong thẻ <img src="http://img_girl.jpg" width="200" height="100">, src, width, height đều có thể được coi là Props của thẻ img.

Trong ReactJS, Props là cách truyền dữ liệu từ component cha xuống component con. Component con chỉ có thể đọc dữ liệu từ Props, không thể thay đổi chúng. Điều này đảm bảo tính nhất quán và dễ kiểm soát của component: cùng một đầu vào sẽ luôn cho ra cùng một đầu ra.

Ví dụ:

class HelloWorld extends React.Component {
  render() {
    return <h1>Xin chào {this.props.name}</h1>;
  }
}

const element = <HelloWorld name="ITNavi" />; 

Trong ví dụ trên, name là một Prop được truyền từ component cha xuống component con HelloWorld.

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

Sử dụng Props khi cần truyền dữ liệu từ component cha xuống component con. Props xây dựng mối quan hệ cha con giữa các component.

Ví dụ, một component Heading với prop message:

<Heading message="Đây là tiêu đề" />

Component Heading có thể được sử dụng nhiều lần với các giá trị message khác nhau. Lưu ý: Không nên thay đổi giá trị của props.message bên trong component Heading.

Props trong Component – Ví dụ cụ thể

class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

const element = <Welcome name="Sara" />;

Ví dụ trên tạo một thuộc tính name với giá trị “Sara”. Props được truyền vào component giống như tham số của một hàm.

Mỗi component có thể có props mặc định. Nếu component không được truyền prop nào, nó sẽ sử dụng giá trị mặc định.

Welcome.defaultProps = {
  name: "world",
};

Nếu Welcome được gọi mà không truyền name, nó sẽ hiển thị: Hello world.

Props có thể được tính toán từ component cha hoặc được thiết lập từ chính component đó.

Tại sao không nên thay đổi Props?

Mặc dù có thể thay đổi Props bằng setProps hoặc replaceProps, nhưng điều này không được khuyến khích. Props nên là bất biến (immutable).

Khi truyền props vào component, chúng không nên bị thay đổi. Điều này giúp kiểm soát component dễ dàng hơn: cùng một đầu vào luôn cho ra cùng một đầu ra. Trong trường hợp cần thay đổi dữ liệu, hãy sử dụng State.

State là gì?

State là một đối tượng lưu trữ thông tin bên trong component, khác với Props được truyền từ bên ngoài. State thường được sử dụng để lưu trữ thông tin cần thay đổi trong quá trình hoạt động của component.

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

Sử dụng State khi dữ liệu trong component cần thay đổi, ví dụ như khi người dùng tương tác với component (click button, nhập liệu…).

Kết luận

Hiểu rõ Props và State là rất quan trọng khi làm việc với ReactJS. Props dùng để truyền dữ liệu từ cha xuống con, còn State dùng để quản lý dữ liệu thay đổi bên trong component. Hy vọng bài viết này đã giúp bạn hiểu rõ Props là gì và cách sử dụng nó.