Props và state trong ReactJs - Thông tin tổng quan năm 2022

Trong lập trình với React, các state và props được sử dụng thường xuyên để điều chỉnh các dòng dữ liệu trong component (thành phần). State và props có nhiều nét giống nhau nhưng cách sử dụng lại hoàn toàn khác biệt nên thường bị nhầm lẫn. Bài viết dưới đây sẽ giúp bạn phần biệt Props và State trong React.
ReactJs là thư viện hoạt động dựa trên các component (thành phần). Về cơ bản, khi sử dụng Reacts trong việc thiết kế UI (giao diện người dùng), ta sẽ chia các component phức tạp thành các component cơ bản. Sau khi phát triển các thành phần cơ bản, chúng ta thêm chúng lại với nhau để tạo thành một giao diện người dùng phức hợp. React kiểm soát các luồng dữ liệu trong các thành phần bằng state và props được sử dụng để kết xuất các component với dữ liệu động.

Props

Props là viết tắt của Properties (thuộc tính), chúng là những component chỉ đọc hoạt động tương tự như các thuộc tính HTML. Trong React, props được sử dụng để gửi dữ liệu đến các component, mọi component trong ReactJs đều được coi là một hàm JavaScript thuần túy, Props cũng đóng vai trò tương đương với các tham số của hàm này. Giá trị của Props có thể được thay đổi bằng cách truyền dữ liệu từ ngoài vào. Vì props là hàm thuần túy nên một khi props đã được truyền vào component, giá trị của nó sẽ không thể thay đổi được.

Như chúng ta đã biết, các component của React sắp xếp giao diện người dùng dưới dạng một cây, trong đó thành phần mẹ đóng vai trò là gốc và các thành phần con trở thành các nhánh con. Giả sử thành phần mẹ muốn gửi dữ liệu đến một trong những thành phần con trở thành nhánh và nhánh con. Nếu thành phần mẹ muốn gửi dữ liệu đến một trong những thành phần lồng sâu trong đó, ví dụ như hình dưới đây từ thành phần 1 đến thành phần 6, chúng ta sẽ phải làm thế nào?

Do React tuân theo nguyên tắc các Props phải đi từ thành phần mẹ đến thành phần con, do vậy, bạn không thể bỏ qua bất kỳ lớp nào của các component con khi gửi một prop và component con này cũng không thể gửi ngược prop lại cho thành phần mẹ. Bạn có thể có các props mặc định trong trường hợp các component mẹ không chuyển các props xuống. Đây là lý do tại sao React có liên kết dữ liệu một chiều.

Vì vậy, trong trường hợp này, chúng ta cần gửi dữ liệu từng lớp một cho đến khi nó đến được thành phần đích. Mọi thành phần trong đường dẫn này phải nhận thuộc tính từ từ thuộc tính cha và sau đó gửi lại thuộc tính đó cho con của nó như đã nhận. Quá trình này lặp lại cho đến khi thuộc tính của bạn đạt được thành phần mục tiêu . 

Ví dụ về việc di chuyển các Props 

import React from 'react';

import ReactDOM from 'react-dom';

class MyComponent extends React.Component{

        render(){

        return(  

              <div>

               <h1>Hello</h1>

               <Header name="maxx" id="101"/>

           </div>

        );

    }

}

function Header(props) {

    return (             

           <div>

            <Footer name = {props.name} id = {props.id}/>

           </div>

    );

}

function Footer(props) {

    return (            

           <div>            

            <h1> Welcome : {props.name}</h1>            

            <h1> Id is : {props.id}</h1>

           </div>

  );

}

ReactDOM.render(

   <MyComponent/>, document.getElementById('content')

);

State

State là thành phần của component và đóng vai trò như một kho lưu trữ dữ liệu cho các component của ReactJS. State thường được sử dụng để cập nhật các component  khi người dùng thực hiện một số hành động như clicking button, typing some text, pressing some key

React.Component là lớp cơ sở cho tất cả các thành phần ReactJS dựa trên lớp. Bất cứ khi nào có một lớp kế thừa lớp React.Component đó, hàm tạo của nó sẽ tự động gán thuộc tính state cho lớp với giá trị nguyên bản được đặt thành null. Chúng ta có thể thay đổi nó bằng cách ghi đè phương thức constructor.

Khi cần thay đổi hoặc cập nhật state, bạn nên hạn chế sử dụng lệnh this.state = {'key': 'value'} mà thay vào đó hãy sử dụng phương pháp setState để cập nhập các đối tượng. 

Cách gán state cho một component

import React from 'react';

import ReactDOM from 'react-dom';

class MyComponent extends React.Component {

    constructor() {

        super();

        this.state = {

            name: 'Maxx',

            id: '101'

        }

    }

    render()

        {

            setTimeout(()=>;{this.setState({name:'Jaeha', id:'222'})},2000)

            return (            

                   <div>                    

                     <h1>Hello {this.state.name}</h1>

                     <h2>Your Id is {this.state.id}</h2>

                   </div>

             );

        }

    }

ReactDOM.render(

    <MyComponent/>, document.getElementById('content')

);

So sánh Prop với State