ReactJS: State là gì? Bí quyết dùng state đúng phương pháp trong React

Lúc muốn render lại 1 element, chúng ta cần thay đổi lại dữ liệu (có thể là props hoặc state). Ở bài viết trước, chúng ta đã tìm hiểu về props của 1 element. Trong bài viết này, Tino Group sẽ giới thiệu thêm về khái niệm state và phương pháp dùng state đúng phương pháp trong 1 element như thế nào nhé!

Giới thiệu về State

State là gì?

State cũng tương tự như props, nhưng nó là của riêng 1 element và được quản lý bởi chính element ấy.

Có thể xem state giống như nơi lưu trữ dữ liệu của 1 element trong React. Nó được dùng chủ yếu để cập nhật lại giao diện (UI) sở hữu những điều kiện nhất định.

Để dùng được state thì element của chúng ta buộc phải là 1 class element (hoặc có thể dùng React Hooks trong phiên bản 16.8).

Class element thì được kế thừa từ lớp cơ sở của React là React.Element. Trong 1 element, state giá trị ban đầu là null, và được khai báo trong hàm khởi tạo (Constructor), và chúng ta có thể gán giá trị mặc định của state ở hàm này.

Thí dụ về State

Xem dí dụ sau để hiểu rõ hơn về state, đề nghị là bài viết ban đầu chỉ hiển thị phần mô tả ngắn, sau lúc nhấn nút “View extra” thì mới hiển thị đa số nội dung bài viết đồng thời ẩn đi nút ‘View extra’:

Xem Thêm  What's MOBOX? Every part you want lớn learn about MOBOX Token

Giải thích dí dụ:

  • Element WikiPost là 1 class kế thừa từ lớp Element của React nên chúng ta có thể khai báo và quản lý state trong này.
  • Element này có hàm khởi tạo (constructor), trong ấy chúng ta khởi tạo 1 state có key là ‘viewmore’, giá trị là false.
  • Để dùng được giá trị bên trong state ta dùng this.state.
  • Element này sẽ trả về giá trị là những components tags và hiển thị chúng trên trình thông qua như sau:
  • Lúc chúng ta nhấn vào nút “View extra”, thì element sẽ lắng nghe tới hàm handleViewmore(), trong hàm này ta dùng phương thức setState() để cập nhật lại giá trị viewmore của state.
  • Giá trị được cập nhật thì element của chúng ta sẽ được render lại, và hiển thị tiếp đoạn văn bản đúng sở hữu đề nghị. Kết quả như sau:

Chuyển đổi Perform element thành Class element

Để dùng state, những phương thức lifecycle và những tác vụ khác, ta buộc phải chuyển operate element thành class element, hãy xem qua những bước đơn giản sau để chuyển đổi nhé:

Bước 1: Tạo 1 class ES6 cùng tên sở hữu operate cần chuyển, và cho class ấy kế thừa lớp cơ sở React.Element.

Bước 2: Thêm 1 phương thức render() rỗng trong class.

Bước 3: Vận động nội dung của operate vào bên trong phương thức render()

Bước 4: Thay thế props bằng this.props trong nội dung của render() trường hợp có.

Bước 5: Xóa operate rỗng ban đầu.

Dùng state đúng phương pháp như thế nào?

Ko cập nhật quản lý giá trị của state

Để cập nhật lại giá trị của state, chúng ta ko thể gán giá trị quản lý vào state như this.state = {‘key’: ‘new worth’}, mà buộc buộc phải dùng phương thức setState() của React.

Xem Thêm  Prime 5 Recreation nổi bật trong hệ Close to bạn ko thể bỏ qua!

Nơi duy nhất bạn có thể gán this.state là ở hàm khởi tạo (constructor).

Cập nhật state có thể là bất đồng bộ (Asynchronous)

Bởi vì this.state và this.props có thể được cập nhật bất đồng bộ, nên lúc chúng ta dựa vào giá trị của chúng để tính toán state tiếp theo thì nhiều trường hợp sẽ bị sai.

State cập nhật những biến độc lập

State gộp object ta phân phối vào state hiện tại lúc ta gọi setState().

Lúc state là 1 object chứa nhiều key, thì lúc gọi setState(), state chỉ cập nhật những key sở hữu worth được truyền vào và giữ nguyên những key còn lại.

Thí dụ, ta khai báo 1 state sở hữu những key độc lập:

constructor(props) { tremendous(props); this.state = { feedback: [], tags: [], writer: ” }; }

Sau ấy ta chỉ cập nhật giá trị cho key cần thiết:

this.setState({ tags: [‘react’, ‘post’] });

React sẽ so sánh object được truyền vào hàm setState() sở hữu state hiện tại 1 phương pháp shallow (so sánh nông), nên lúc ấy chỉ key tags được cập nhật lại giá trị mới, những key còn lại sẽ được giữ nguyên giá trị cũ.

Chuyển state thành props

State được gọi là biến cục bộ và được khép kín trong 1 element, nên 1 element khác muốn truy cập tới state của 1 element khác là điều ko thể.

1 element cha có thể truyền state của chính nó xuống 1 element con như 1 props để element con có thể dùng. Thí dụ:

operate DetailPost() { return <h1>Title: {this.props.title}</h1>; } class WikiPost extends React.Element { constructor(props) { tremendous(props); this.state = { title: “”, }; } render() { return <DetailPost title={this.state.title} />; } }

Xem Thêm  Tranchess (CHESS, QUEEN, BISHOP, ROOK) là gì? Chi tiết CHESS token

Element con DetailPost sẽ nhận title trong props của nó từ state của element cha WikiPost. Lúc title ở state của element cha thay đổi, props của element con sẽ thay đổi theo. Vì thế, cả element WikiPost và DetailPost đều sẽ được render lại.

Đây được gọi là luồng dữ liệu ‘top-down’ hoặc ‘unidirectional’.

Lưu ý: Mỗi lúc giá trị của state hoặc props thay đổi thì element sẽ được render lại.

Nhưng có những lúc chúng ta cập nhật state nhưng ko muốn buộc phải render lại element thì sao? Việc này sẽ được xử lý trong những lifecycle của element. Bạn có thể tìm hiểu về life cycle của 1 element trong React ở bài viết sau.

Bài viết có tham khảo thông tin tại hyperlink: https://reactjs.org/docs/state-and-lifecycle.html

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Heart, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
  • Điện thoại: 0364 333 333Tổng đài miễn chi phí: 1800 6734
  • E mail: gross [email protected]
  • Web site: www.tino.org