Props và State trong Reactjs

React kiểm soát luồng dữ liệu trong các componentvới state và props. Dữ liệu trong state và props được sử dụng để render Component với dữ liệu động.

Trong ReacJs có 2 khái niệm mà lúc bắt đầu học dễ bị nhầm lẫn là props và state. Vậy props và state là gì thì chúng ta sẽ cùng thảo luận sau đây

Props là gì?

• Trong React props được sử dụng để gửi dữ liệu tới các components.
• Trong React mỗi component được coi là một hàm JavaScript thuần.
• Trong React props giống như là tham số của 1 hàm javascript.
• Props là bất biến.
• Hàm ReactJs dựa trên component

import React from "react";
const Profile = (props) => {
 // props.img_url = 'http://via.placeholder.com/350x150'
 const style = {
     padding: '10px',
     border: '1px solid green',
     display: 'block',
     marginLeft: 'auto',
     marginRight: 'auto',
     width: '50%',
     color: '#4db1e8',
     textAlign: 'center',
     fontFamily: 'sans-serif'
 }
 return (
     <div style={style}>
         <img src={props.logo_url} height="250px"/>
         <h1>{props.title}</h1>
     </div>
 );
}
module.exports = Profile;

• Class ReactJs dựa trên component

import React from "react";
class Profile extends React.Component {
 render(){
     // this.props.img_url = 'http://via.placeholder.com/350x150'
     const style = {
         padding: '10px',
         border: '1px solid green',
         display: 'block',
         marginLeft: 'auto',
         marginRight: 'auto',
         width: '50%',
         color: '#4db1e8',
         textAlign: 'center',
         fontFamily: 'sans-serif'
     }
     return (
         <div style={style}>
           <img src={this.props.logo_url} height="250px"/>
           <h1>{this.props.title}</h1>
         </div>
     );
 }
}
module.exports = Profile;

• Import và sử dụng component của React

import React from "react";
import ReactDOM from "react-dom";
import Profile from "./components/Profile"
ReactDOM.render(
 <Profile 
     logo_url="https://books.agiliq.com/projects/django-design-patterns/en/latest/_static/logo.png"
     title="Mobile App, Web App and API Development and More"/>,
 document.getElementById("main")
);

Trong đoạn code trên có thông qua 2 props là logo_url và title

• Chúng ta không cần sử dụng this cho các function dựa trên component để truy cập props nhưng phải sử dụng this để truy cập props this.props.<props_name>.

State là gì?

• State giống như kho lưu trữ dữ liệu cho component của ReactJs. Nó chủ yếu được sử dụng để cập nhật component khi người dùng có các thao tác như nhấn nút, nhập text...
• React.Component là lớp cơ sở cho tất cả các component của ReactJs. Bất cứ khi nào 1 class kế thừa React.Component contructor của nó sẽ tự động gán thuộc tính cho lớp với giá trị khởi tạo là null. Chúng ta có thể thay đổi bằng cách ghi đè contructor của nó.
• Trong nhiều trường hợp chúng ta phải cập nhật state. Để làm được điều này chúng ta phải sử dụng phương thức setState() thay vì gán giá trị trực tiếp cho nó như thế này this.state = {'key': 'value'}.
• Ví dụ tạo state

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;

Giao diện sẽ hiển thị với đoạn code trên như sau:

Sau khi click button sẽ thu được kết quả:

Trong đoạn code trên đã ghi đè constructor và thiết lập state ban đầu với key: show_technologies có giá trị false. Khi render component sẽ check xem giá trị của show_technologies nếu false thì chỉ render ra button. Sử dụng sự kiện click cho button. Khi click button state sẽ được xử lý this.setState({"show_technologies": true}) set lại giá trị cho show_technologies là true kết quả sau khi click sẽ thay đổi so với ban đầu.

Túm lại thì bất cứ khi nào state được cập nhật thì component sẽ đều render lại state mới nhất.

Bài viết trên là tìm hiểu đôi chút của mình về props và state, các bạn nếu muốn tìm hiểu kỹ hơn có thể đọc tại đây.

Nguồn tham khảo: