Người viết: Trung Hiếu
Gmail: buihieu3008@gmail.com
Bài viết gốc: https://www.freecodecamp.org/news/react-js-for-beginners-props-state-explained/

React.js dành cho người bắt đầu - Props và State là gì?

  • React.js là một trong những thư viện JavaScript được sử dụng rộng rãi nhất mà các dev front-end cần biết. Hiểu về props và state là gì và sự khác biệt giữa chúng là một bước tiến lớn để học về React.
  • Ở bài viết này, tôi sẽ giải thích khái niệm về props và state, và tôi cũng sẽ tổng hợp những câu hỏi thường gặp nhất về chúng:
    • Props là gì?
    • Truyền data với props như thế nào?
    • State là gì?
    • Update state của một thành phần như thế nào?
    • Chuyện gì sẽ xảy ra khi state thay đổi?
    • Tôi có thể dùng state trong mọi component không?
    • Sự khác nhau giữa props và state là gì?

Props là gì?

  • Props là viết tắt của thuộc tính và chúng được sử dụng để truyền dữ liệu giữa các thành phần React. Luồng dữ liệu của React giữa các thành phần là đơn hướng (từ cha sang con).

Truyền data với props như thế nào?

class ParentComponent extends Component {    
    render() {    
        return (        
            <ChildComponent name="First Child" />    
        );  
    }
}

const ChildComponent = (props) => {    
    return <p>{props.name}</p>; 
};
  • Trước tiên, chúng ta cần xác định lấy một số dữ liệu từ thành phần cha và gán nó cho thuộc tính “prop” của thành phần con.
<ChildComponent name="First Child" />
  • “Name” sẽ xác định prop ở đây và chứa data văn bản. Sau đó chúng ta có thể truyền data cùng với props giống như chúng ta đang đưa ra một đối số cho function:
const ChildComponent = (props) => {  
  // statements
};
  • Và cuối cùng, chúng ta sử dụng dấu chấm để truy cập prop data và render nó:
return <p>{props.name}</p>;

State là gì?

  • React có một đối tượng tích hợp đặc biệt khác được gọi là state, cho phép các thành phần tạo và quản lý dữ liệu của riêng chúng. Vì vậy, không giống như props, các thành phần không thể truyền dữ liệu với state, nhưng chúng có thể tạo và quản lý nó trong nội bộ.
  • Đây là một vài ví dụ cho thấy cách sử dụng state:
class Test extends React.Component {    
    constructor() {    
        this.state = {      
            id: 1,      
            name: "test"    
        };  
    }    
    
    render() {    
        return (      
            <div>        
              <p>{this.state.id}</p>        
              <p>{this.state.name}</p>      
            </div>    
        );  
    }
}

Update state của một thành phần như thế nào?

  • Không nên trực tiếp sửa đổi state, nhưng nó có thể sửa đổi cùng với một cách đặc biệt được gọi là setState.
this.state.id = “2020”; // wrong

this.setState({         // correct  
    id: "2020"
});

Chuyện gì sẽ xảy ra khi state thay đổi?

  • Được rồi, tại sao chúng ta phải dùng setState? Tại sao chúng ta thậm chí cần state đối tượng chính nó? Nếu bạn đang đặt câu hỏi này, đừng lo lắng, bạn sẽ hiểu state sớm thôi, để tôi giải đáp cho bạn nhé.
  • Một sự thay đổi trong state xảy ra dựa trên user-input, triggering an event, v.v. Ngoài ra, các thành phần React (với state) được hiển thị dựa trên dữ liệu trong state. State nắm thông tin ban đầu.
  • Vậy nên khi state thay đổi, React nhận ngay được thông tin và hiển thị DOM - Không phải mọi DOM, mà chỉ thành phần đã cập nhật state. Đây là một trong những lý do tại sao React lại nhanh.
  • Và React nhận thông báo như thế nào? Bạn đã đoán được nó: Cùng với setState. Phương pháp setState kích hoạt quá trình kết xuất cho phần cập nhật. React được thông báo, biết phần nào để thay đổi, và làm nó một cách nhanh chóng mà không cần kết xuất tất cả DOM.
  • Kết luận rằng, có 2 điểm quan trọng chúng ta cần chú ý khi sử dụng state:
    • State không được thay đổi trực tiếp - Cần sử dụng setState
    • State ảnh hưởng đến hiệu suất của app nên chúng ta không nên dùng khi không cần thiết.

Tôi có thể dùng state trong mọi component không?

  • Một câu hỏi quan trọng khác mà bạn nên đặt ra về state đó là: Chính xác là chúng ta có thể dùng state ở đâu. Dạo gần đây, state chỉ được dùng trong class components, không phải trong functional components.
  • Đó là lý do tại sao các thành phần chức năng còn được gọi là các thành phần không trạng thái. Tuy nhiên, sau sự ra đời của React Hooks, state bây giờ có thể được sử dụng cả trong class và functional components.
  • Nếu dự án của bạn không sử dụng React Hooks, vậy thì bạn chỉ có thể sử dụng state trong các lớp chức năng.

Sự khác nhau giữa props và state là gì?

  • Cuối cùng thì chúng ta hãy xem những sự khác biệt chính giữa props và state:
    • Các thành phần nhận dữ liệu từ bên ngoài cùng props, trong đó chúng có thể tạo và quản lý data của chúng cùng state.
    • Props dùng để truyền dữ liệu, trong đó state quản lý dữ liệu.
    • Dữ liệu trong props chỉ để đọc, và không thể bị sửa đổi bởi thành phần nhận nó từ bên ngoài.
    • Dữ liệu state có thể được sửa đổi bởi thành phần của chính nó, nhưng riêng tư (Không thể bị truy cập từ bên ngoài)
    • Props chỉ có thể được truyền từ thành phần mẹ đến thành phần con (flow không trực tiếp)
    • Thay đổi state nên được thực hiện cùng setState.

Thank you for reading!