[React] Props và State là gì? So sánh Props và State

Props là gì?

Props là 1 từ viết ngắn gọn của properties, props định nghĩa là 1 đối tượng trong ReactJS, nó lưu trữ các giá trị của các attribute (thuộc tính) của một thẻ (Tag). Là cách mà component có thể nhận được các giá trị của thuộc tính truyền từ bên ngoài vào component, và là cách mà các component có thể nói chuyện với nhau.

Bạn hình dung Props giống như các attribute của thẻ HTML vậy.

Ví dụ đoạn mã HTML sau:

<img src="img_girl.jpg" width="500" height="600">

Các attribute như src, width, height cũng có thể coi là props của thẻ <img>

Mọi component được coi là một hàm javascript thuần khiết (Pure Function) và props tương đương với các tham số của hàm javascript thuần khiết.

Bởi vậy, Props là bất biến (không thể thay đổi được dữ liệu của props trong React) cũng như hàm thuần khiết không thể thay đổi tham số truyền vào.

Props là cách để bạn có thể truyền dữ liệu từ component cha xuống component con.Và component con chỉ được đọc, không thể thay đổi dữ liệu đó.

Điều này giúp chúng ra dễ dàng kiểm soát Component hơn.

Ví dụ: Tạo một component Greating với props là fullName

// Create a ES6 class component
class Greeting extends React.Component {
  // Use the render function to return JSX component
  render() {
    return (
      <div className="greeting">
         <h3>Hello {this.props.fullName}</h3>
      </div>
      );
    }
}
 
const element1 = document.getElementById('greeting1')
 
// Use the ReactDOM.render to show your component on the browser
ReactDOM.render(
    <Greeting fullName='Tran' />,
    element1
)

Image

Giá trị của attribute (Của thẻ) sẽ được truyền vào (pass) cho property (Của Component).

Tuy nhiên bạn vẫn có thể khởi tạo các giá trị mặc định cho các property bằng defaultProps.

Ví dụ: Component có tên Welcome, và khởi tạo giá trị cho các property

class Welcome extends React.Component {
 
  render() {
    return (
      <div className="welcome">
         <h3>Hi {this.props.name}!</h3>
         <i>{this.props.message}</i>
      </div>
      );
    }
}
// Default values of props
Welcome.defaultProps = {
   name: "There",
   message:"Welcome to Website!"
}
 
const element1 = document.getElementById('welcome1')
const element2 = document.getElementById('welcome2')
 
 
ReactDOM.render(
    <Welcome name='Tran' message='Welcome back!' />,
    element1
)
 
ReactDOM.render(
    <Welcome />,
    element2
)

Image

Nếu một attribute nào đó không có trên thẻ, thì component sẽ lấy giá trị mặc định:

Image

Chú ý: props là bất biến (immutable), không thể thay đổi giá trị.

State là gì?

State 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, nó cho phép một component theo dõi thông tin thay đổi giữa các kết xuất (render) và làm cho nó có thể tương tác.

Do đó, State chủ yếu được sử dụng để cập nhật component khi người dùng tương tác, thực hiện một số hành động như nhấp vào nút, nhập một số văn bản, nhấn một số phím, v.v.

Bất cứ khi nào một lớp kế thừa lớp React.Component, hàm tạo (Constructor) của nó sẽ tự động gán thuộc tính state cho lớp với giá trị ban đầu được gán bằng null. Chúng ta có thể thay đổi nó bằng cách ghi đè hàm tạo (Constructor).

Nếu dự đoán được một component cần quản lý state, thì nó nên được tạo ở trong một class component chứ không phải là một function component. (Để hiểu tại sao bạn có thể xem tại đây)

Khi chúng ta cần cập nhật state. Để làm điều đó, chúng ta phải sử dụng phương thức setState và chúng ta không thể gán trực tiếp như thế này this.state = {'key': 'value'}

Tại sao lại như vậy?

Bởi vì, khi sử dụng hàm setState() để thay đổi giá trị State, React sẽ cập nhật cây DOM một cách tự động. Bạn không phải lo lắng về việc phải thêm viết thêm xử lý sự kiện nữa

Lưu ý: State chỉ có thể được sử dụng ở trong một component sinh ra nó. Vậy nên,giá trị của State chỉ được thay đổi bởi chính Component khai báo state đó,  các component con không thể thay đổi giá trị state đó được.

Để hiểu hơn bạn có thể xem ví dụ dưới đây:

Với đoạn mã dưới thì UI người dùng hiển thị một nút button "Click to see Our Technologie". Khi click vào button chúng ta sẽ thấy một nội dung được hiển thị.

 class Profile extends React.Component {
      constructor(props){
          super(props)
          this.state = {"show_technologies": false}
          this.see_our_technologies = this.see_our_technologies.bind(this);
      }
      see_our_technologies(){
          this.setState({"show_technologies": true})
      }
      render(){
          console.log(this.state)
          const style = {
              padding: '10px',
              border: '1px solid green',
              display: 'block',
              marginLeft: 'auto',
              marginRight: 'auto',
              width: '50%',
              color: '#4db1e8',
              textAlign: 'center',
              fontFamily: 'sans-serif'
          }
          const tech = {
              background: '#4db1e8',
              color: '#fff',
              padding: '5px',
              marginRight: '5px'
          }
          return (
              <div style={style}>
                  <img src={this.props.img_url} height="250px"/>
                  <h1>{this.props.title}</h1>
                  {this.state.show_technologies ?
                      <p>
                          <span style={tech}>Python</span>
                          <span style={tech}>Django</span>
                          <span style={tech}>Django REST</span>
                          <span style={tech}>ReactJS</span>
                          <span style={tech}>Angular</span>
                          <span style={tech}> and More</span>
                      </p>
                      :
                      <button onClick={this.see_our_technologies}>Click to see Our Technologies</button>
                  }
              </div>
          );
      }
}
module.exports = Profile;

Giải thích:

Đầu tiên, chúng ta đã ghi đè hàm tạo (Constructor) và thiết lập giá trị state ban đầu: show_technologies bằng false.

Trong khi rendering ra component React sẽ kiểm tra giá trị show_technologies và nếu nó thiết lập giá trị là false thì React chỉ render ra nút button

Chúng ta sẽ liên kết sự kiện khi Click vào nút button. Bây giờ người dùng Click vào nút button state sẽ thay đổi thành: {"show_technologies": true} bằng cách sử dụng phương thức setState.

Bây giờ, state đã được thay đổi, react tự động render lại component với những thay đổi đó.

Bất cứ khi nào state được cập nhật trong component, tất cả các component con của nó cũng sẽ render/show lại với những thay đổi mới nhất. Đó cũng chính là cách state hoạt động.

Tổng Kết Props và State