State trong reactjs

Giới thiệu nội dung bài viết

Chào các em, hôm nay anh sẽ hướng dẫn mọi người cách sử dụng State trong reactjs. Chúng ta sẽ học cách sử dụng state để quản lý luồng đi dữ liệu từ component cha xuống các component con.

1. State là gì

State được hiểu là nơi tập trung và chứa dữ liệu của các component. Ví dụ như mình có 10 components cần dữ liệu từ state, thì chúng ta sẽ tạo ra một component cha chứa tất cả dữ liệu trong state. Sau đó từ component cha dữ liệu sẽ được truyền đi tới các component theo một hướng dọc từ cha xuống con. Giúp chúng ta dễ dàng phát hiện được luồng đi của dữ liệu trong ứng dụng web

Chúng ta sẽ tạo component và sử dụng state để chứa dữ liệu như sau.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         header: "Header from state...",
         content: "Content from state..."
      }
   }
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
         </div>
      );
   }
}
export default App;

Chúng ta sử dụng this.state để chứa mảng dữ liệu json là header và content.

Hai component h1 và h2 lấy giá trị header và content thông qua state như sau

1
2
3
4
 <h1>{this.state.header}</h1>
 <h2>{this.state.content}</h2>

export default App;

Để chay được ứng dụng ta code file main.js như sau

1
2
3
4
5
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

2. Video Demo

Play

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments