Tìm hiểu State trong ReactJS (Có ví dụ thực hành)

State trong ReactJS là gì?

State là một object, là một thành phần quan trọng để xây dựng một component.

State có tác dụng lưu trữ dữ liệu của một component và chỉ được sử dụng trong nội bộ một component mà thôi.

Khi giá trị của state được thay đổi thì đồng nghĩa component đó sẽ được render lại.

Sử dụng state như thế nào?

Để sử dụng được state thì bạn có 2 cách để khai báo

// Cách 1:
this.state = { name : 'VoManhKien.com' }

Với cách 1 thì bạn có thể dùng từ khoá this.state đặt trong một class để khai báo.

// Cách 2:
constructor(props) {
   super(props);
   this.state = { website: "VoManhKien.com" };
 }

Với cách 2 thì bạn có thể để trong thẻ khởi tạo constructor

React đề xuất bạn nên sử dụng cách 2 để khởi tạo state.

Đối với một function component thì bạn phải sử dụng useState() để có thể khai báo một state. Đây là một React Hooks chúng ta sẽ học trong những bài sau.

Nếu bạn muốn sử dụng state mới khai báo thì bạn có thể gọi đến object state như this.state.name name ở đây là phần tử trong object bạn đã khai báo ở trên.

Bạn hãy thử log ra xem

console.log(this.state.name) // VoManhKien.com

Bạn có thể xem một ví dụ nhỏ bên dưới, mình khai báo state bên trong constructor và sau đó gọi ra ở bên trong hàm render để sử dụng.

import React from "react";
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "VoManhKien.com" };
  }
  render() {
    return (
      <div>
        <h1>Học ReactJS tại {this.state.name} </h1>
      </div>
    );
  }
}
export default App;

Nếu bạn muốn cập nhật một state thì bạn chỉ cần gọi phương thức

this.setState({key: value})

Lưu ý: bạn không thể gán giá trị mới cho state bằng this.state.name = "Kien.pro"

Ví dụ mình cập nhật giá trị name ở trên thì mình sẽ làm như sau:

this.setState({ name: "Kien.pro" })

Ngoài ra bạn cũng có thể lấy giá trị trước của state trước khi cập nhật

this.setState((state) => {
  return {
      count: state.count + 1,
    };
  });
}}

Bạn có thể xem ví dụ bên dưới, mình đã làm theo 2 cách setState

import React from "react";
import "./App.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1,
    };
  }

  render() {
    return (
      <div className="App">
        <p>Count: {this.state.count}</p>
        <button
          onClick={() => {
            this.setState({
              count: this.state.count + 1,
            });
          }}
        >
          Thêm 1
        </button>
        <button
          onClick={() => {
            this.setState((state) => {
              return {
                count: state.count - 2,
              };
            });
          }}
        >
          Bớt 2
        </button>
      </div>
    );
  }
}

export default App;

Và kết quả sẽ ra thế này

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

State và Props có sự khác nhau cơ bản như sau:

• State: State là dữ liệu nội bộ trong một component, cho nên chỉ có thể sử dụng trong component đã khai báo nó mà thôi.
• Props: Dữ liệu đực chuyền qua các component, component cha truyền cho component con và khi component con nhận thì chỉ có thể đọc chứ không thế thay đổi giá trị

Một số lưu ý khi sử dụng State

Để việc sử dụng state được dễ dàng và tránh gây ra lỗi ngoài ý muốn thì mình sẽ liệt kê một số lưu ý như sau:

• Bạn nên để cấu trúc dữ liệu của state đơn giản nhất có thể, không nên tạo cấu trúc quá lằng nhằng sẽ khó thao tác và ảnh hưởng hiệu năng
• Không thay đổi state một cách trực tiếp
• State được update không đồng bộ nên bạn cần lưu ý khi sử dụng hàm setState cần giá trị từ state trước

Khi nào nên sử dụng state và khi nào nên dùng props

Vậy khi nào thì nên sử dụng state và khi nào thì nên dùng Props?

Khi bạn chỉ muốn sử dụng dữ liệu nội bộ trong component đó thì có thể sử dụng state, vì nó có thể thay đổi giá trị tuỳ ý

Còn nếu bạn muốn truyền giá trị qua một component khác thì bạn cần dùng đến props

Ví dụ thực tế

Bây giờ chúng ta sẽ xét một ví dụ thực tế, kết hợp giữa state và props

Vấn đề: Có 2 component App.js và Author.js. Trong component App sẽ chứa state name hiển thị phần Your name: name còn component Author sẽ chứa phần input

Làm sao để khi input ở component Author sẽ có thể update state ở component App

Và đây là kết quả đạt được

Bạn hãy thử làm và thử suy nghĩ xem sao, ở dưới bạn có thể xem code đầy đủ.

Kết luận

Như vậy trong bài viết này, mình đã giới thiệu đến bạn State trong ReactJS. Mình xin nhắc lại, đây là kiến thức quan trọng bạn cần tìm hiểu kỹ và hiểu nó.

Nếu có thắc mắc gì bạn có thể comment bên dưới cùng thảo luận.

Hẹn gặp bạn trong những bài tiếp theo.