Sự khác nhau giữa Props và State trong React

Gần đây mình có tìm hiều về React, trong quá trình tìm hiểu mình thấy Props và State được sử dụng khá nhiều. Vậy chúng là gì và khác nhau như thế nào, cùng tìm hiểu trong bài viết này nhé!

1. Props là gì?

Props là từ viết tắt của properties, Ở trong React nó là một đối tượng lưu trữ giá trị của attribute trong component, Các componnet có thể nhận được các giá trị của attribute được truyền từ bên ngoài vào đây là cách mà các component giao tiếp với nhau.

Ví dụ:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="ReactJS" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Với ví dụ trên, dòng <Welcome name="ReactJS" /> tạo ra một Component Welcome và attribute có value là ReactJS, ở bên trên chúng ta có 1 function component trả về Hello, {props.name} và như vậy, {props.name} sẽ cho chúng ta giá trị là ReactJS mà Component Welcome truyền vào, và cuối cùng thì khi render sẽ ra đoạn : Hello, ReactJS. Giống như là 1 cách gọi hàm trong javascript đúng không nhỉ 😄

Props có thể được thay đổi bằng cách sử dụng hàm setProps hay replaceProps, nhưng không được React khuyến khích (Props are Read-Only)

2. State là gì?

Cũng giống như props, state cũng lưu trữ thông tin về component, nhưng là lưu trữ dữ liệu động của một component.

State là dữ liệu động, khi có sự thay đổi giá trị thì component sẽ được render lại

State chỉ được sử dụng ở phạm vi trong component sinh ra nó, có nghĩa là bạn không thể sử truy cập giá trị state của component A ở trong component B, mà thay vào đó bạn cần phải sử dụng props để truyền giá trị trong state của component A sang B

Hãy cùng mình xem xét ví dụ sau đây nhé:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Đoạn code sẽ hoạt động như sau:

• Component khởi tạo và khởi tạo luôn State với date = current time
• Sau khi Compnent khởi tạo với giá trị state được khởi tạo thì componentDidMount sẽ chạy và khởi tạo interval và gán nó cho this.Timer
• Sau khi interval chạy thì sẽ update State mỗi giây bằng method this.setState()
• State thay đổi sẽ raise sự kiện change và render sẽ update UI mới nhất.
• Trước khi chúng ta rời khởi page thì function componentWillUnmount() sẽ chạy và clear interval

3. So sánh giữa State và Props

Tóm lại props dùng để truyền data từ component này sang component khác, Props không thể thay đổi giá trị, read-only và immutable

State chứa local data của component, có thể thay đổi giá trị, chỉ được sử dụng trong phạm vi component của chính nó, mỗi component sẽ có một state riêng của nó

Hi vọng với bài viết này sẽ giúp các bạn hiểu thêm về props và state và có gì chưa đúng mong các bạn góp ý 😄