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

Props là các biến, data được truyền từ component cha và có thể truy cập được ở cả các component con.
State được khởi tạo và chỉnh sửa và chỉ có thể truy bởi chính bản thân component chứa nó.

Điểm khác nhau lớn nhất giữa props và state đó là props không thể thay đổi, còn state có thể thay đổi do đó hiệu năng của props tốt hơn state.

Cũng chính vì sự khác nhưa giữa Props và State mà ta có khái niệm Stateful component và Stateless component .

Stateless Component là gì?

Stateless component là các component chỉ chứa props, các component loại này chỉ dùng để render() thì sẽ hiệu quả hơn.

Stateful Component là gì?

Stateful Component là các component chứa cả props và state, các component này được dùng xử lý data, phản hỏi yêu cầu người dùng, phù hợp cho mô hình client server…

Khi nào dùng Props, khi nào dùng state?

Cả state và props đều dùng để quản lý data bên trong một component.

Với props:

Thông thường props được set bởi component cha và truyền vào component con và cố định trong suốt vòng đời. Do đó ta dùng props trong trường hợp cần trao đổi data giữa các component, ví dụ:

class Parent extends React.Component{
  render()
  {
     return(
        <div>
            <Child name = {"ron"}/>
        </div>
      );
  }
}
class Child extends React.Component{
{
    render(){
      return(
         <div>
              {this.props.name}
        </div>
      );
     }
}

Với state:

State có thể bị thay đổi nên nó thường được dùng để theo dõi sự thay đổi bên trong component và render lại.

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