React.js State

React.js State

• Như đã đề cập ở bài trước giá trị của Props không thay đổi, chỉ truyền từ component này sang component khác.
• Tuy nhiên trong thực tế, bản thân component đôi lúc cũng cần xử lý dữ liệu riêng của nó, ví dụ thay đổi thông tin dữ liệu như name, … do đó React đã cho ra đời khái niệm State để giải quyết bài toán về dữ liệu bên trong component.

Cấu trúc chung của State

Cấu trúc chung của một component sử dụng với State được viết dưới dạng Classes (hoặc arrow function) như bên dưới.

class ClassName extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      ...
    );
  }
}

• ClassName tên Class.
• extends React.Component phương thức kế thừa component (thực ra là kế thừa class đã tồn tại).
• constructor(props) hàm khởi tạo đối tượng cho một class, mỗi class chỉ chứa một hàm khởi tạo duy nhất.
• super(props) gọi lại constructor trong React.Component, khi này ta mới có thể sử dụng phương thức this được.
• this.state phải là một Object.
• render giống như cách dùng của props.

Để hiểu rõ hơn về State, ta xét file index.html sau:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello React</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="member"></div>
  <script type="text/babel">
    class Member extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          name: "Bùi Văn Tèo",
          age: 25
        };
      };
      render() {
        return (
          <div>
            <h2>{this.state.name}</h2>
            <p>Tuổi: {this.state.age}</p>
          </div>
        );
      };
    };
    ReactDOM.render(
      <Member />,
      document.getElementById('member')
    );
  </script>
</body>
</html>

Hiển thị trình duyệt

Bùi Văn Tèo
Tuổi: 25

• Nội dung trên không có gì đặc biệt, chỉ là khai báo State với constructor, gán giá trị ban đầu cho State là this.state, sau đó render nội dung đã được khai báo.
• Ví dụ trên là cách làm việc đơn giản nhất của State.

Cấu trúc đơn giản của State

Chúng ta cũng có thể viết một State đơn giản như sau:

class ClassName extends React.Component {
  state = {};
  render() {
    return (
      ...
    );
  }
}

Ta xét file index.html sau:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello React</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="member"></div>
  <script type="text/babel">
    class Member extends React.Component {
      state = {
        name: "Bùi Văn Tèo",
        age: 25
      };
      render() {
        return (
          <div>
            <h2>{this.state.name}</h2>
            <p>Tuổi: {this.state.age}</p>
          </div>
        );
      };
    };
    ReactDOM.render(
      <Member />,
      document.getElementById('member')
    );
  </script>
</body>
</html>

Hiển thị trình duyệt

Bùi Văn Tèo
Tuổi: 25

• Ta thấy nội dung trên rất đơn giản để khai báo một State.
• Vậy tại sao không sử dụng State đơn giản như trên cho gọn, cần gì phải dùng constructor cho rắc rối? câu trả lời là constructor là phương thức (method) luôn luôn được gọi đầu tiên mỗi khi khởi tạo một Classes, nó đảm bảo mọi thứ đã sẵn sàng trước khi bắt đầu một Classes. Tuy nhiên, tùy vào cách sử dụng mà bạn có thể dùng constructor hay không nhé.