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

Sự khác biệt giữa Props và State trong React là gì?

• Props là viết tắt của Properties. Nó là một object tích hợp trong React lưu trữ giá trị của các thuộc tính của thẻ và hoạt động tương tự như các thuộc tính HTML. Props cho phép chúng ta giao tiếp giữa các components với nhau bằng cách truyền tham số qua lại giữa các components.
• State là một đối tượng React tích hợp được sử dụng để chứa dữ liệu hoặc thông tin về Component. State trong một component có thể thay đổi và bất cứ khi nào nó thay đổi, component sẽ render lại. Chúng ta cùng đi tìm hiểu sâu hơn về props và state nhé.

Props

Các props là đối số của function. Các component trong React là các hàm trả về JSX (hoặc nói chung là thứ gì đó có thể kết xuất được như các phần tử React, null, string, v.v.). Thông thường, khi bạn có một đoạn mã mà bạn muốn sử dụng lại, bạn có thể đặt mã đó vào một hàm và bất kỳ giá trị động nào mà mã được sử dụng trước đó đều có thể được chấp nhận làm đối số. Tôi có đoạn code như sau :

function Add(props) {
  return (
    <div>
      {props.number1} + {props.number2} = {props.number1 + props.number2}
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <Add number1={1} number2={1} />
    </div>
  );
}

Thay vì gọi nó như một hàm bình thường (add (1, 1)) thì tôi sử dụng cú pháp JSX * (<Add number1={1} number2={1} />). Các "attributes" được cung cấp trong JSX được gọi là props. Đây là cách nó sẽ được hiển thị:

LƯU Ý: Props có thể là number nhưng cũng có thể là string, array, object, function, v.v. Khi sử dụng props bạn không được phép thay đổi chúng.

State

State cũng tương tự như props, nhưng nó là của riêng component và được kiểm soát hoàn toàn bởi chúng và state có thể thay đổi được và mỗi khi state thì đổi thì component đó sẽ được render lại

function AddNumber(props) {
  const [number, setNumber] = React.useState(0)
  function handleInputChange(event) {
    const input = event.target
    const newNumber = Number(input.value)
    setNumber(newNumber)
  }
  return (
    <div>
      {props.n1} +{' '}
      <input type="number" value={number} onChange={handleInputChange} /> ={' '}
      {props.n1 + number}
    </div>
  )
}
export default function App() {
  return (
    <div className="App">
      <AddNumber n1={1} />
    </div>
  );
}

Điều đó sẽ hoạt động, và đây chính xác là trạng thái React được dự định sử dụng. Nó nhằm theo dõi các giá trị dữ liệu trong suốt thời gian tồn tại của component (miễn là thành phần tồn tại trên trang).

Tôi có kết quả sẽ hiển thị như thế này:

Kết luận

Tôi hy vọng điều này sẽ giúp bạn hiểu rõ sự khác biệt giữa Props và State trong React. Đó là một khái niệm cơ bản. Mong rằng bài viết sẽ giúp ích cho bạn.

Link tham khảo:

• https://reactjs.org/docs/getting-started.html
• https://kentcdodds.com/blog/props-vs-state