Bí quyết về ReactJS: State là gì? Cách sử dụng state đúng phương pháp dán trong React Mới Nhất
READ ALSO
Quan hệ công chúng là gì? Những điều nên phải ghi nhận về quan hệ công chúng
Top 5 ứng dụng chống phân mảnh ổ cứng Win 10
Khi muốn render lại một component, toàn bộ chúng ta cần thay đổi lại tài liệu (trọn vẹn có thể là props hoặc state). Ở nội dung bài viết trước, toàn bộ chúng ta đã tìm hiểu về props của một component. Trong nội dung bài viết này, Group sẽ trình làng thêm về khái niệm state và cách sử dụng state đúng phương pháp dán trong một component ra làm sao nhé!
NỘI DUNGGiới thiệu về StateState là gì?READ ALSOVí dụ về StateChuyển đổi Function component thành Class componentSử dụng state đúng phương pháp dán ra làm sao?Không update trực tiếp giá trị của stateCập nhật state trọn vẹn có thể là yếu tố không tương đương bộ (Asynchronous)State update những biến độc lậpChuyển state thành propsGiới thiệu về State
State là gì?
State cũng tương tự như props, nhưng nó là của riêng một component và được quản trị và vận hành bởi chính component đó.
Có thể xem state in như nơi tàng trữ tài liệu của một component trong React. Nó được sử dụng hầu hết để update lại giao diện (UI) với những Đk nhất định.
Để sử dụng được state thì component của toàn bộ chúng ta phải là một class component (hoặc trọn vẹn có thể sử dụng React Hooks trong phiên bản 16.8).
Class component thì được thừa kế từ lớp cơ sở của React là React.Component. Trong một component, state giá trị ban sơ là null, và được khai báo trong hàm khởi tạo (Constructor), và toàn bộ chúng ta trọn vẹn có thể gán giá trị mặc định của state ở hàm này.
Ví dụ về State
Xem ví dụ sau để làm rõ hơn về state, yêu cầu là nội dung bài viết ban sơ chỉ hiển Thị phần mô tả ngắn, sau khoản thời hạn nhấn nút “View more” thì mới có thể hiển thị toàn bộ nội dung nội dung bài viết đồng thời ẩn đi nút ‘View more’:
Giải thích ví dụ:
Component WikiPost là một class thừa kế từ lớp Component của React nên toàn bộ chúng ta trọn vẹn có thể khai báo và quản trị và vận hành state trong này.Component này còn có hàm khởi tạo (constructor), trong số đó toàn bộ chúng ta khởi tạo một state có key là ‘viewmore’, giá trị là false. Để sử dụng giá tốt trị bên trong state ta dùng this.state.Component này sẽ trả về giá trị là những elements tags và hiển thị chúng trên trình duyệt như sau:
Kết quả khi giá trị viewmore của state bằng false
Khi toàn bộ chúng ta nhấn vào nút “View more”, thì component sẽ lắng nghe đến hàm handleViewmore(), trong hàm này ta dùng phương thức setState() để update lại giá trị viewmore của state.Giá trị được update thì component của toàn bộ chúng ta sẽ tiến hành render lại, và hiển thị tiếp đoạn văn bản đúng với yêu cầu. Kết quả như sau:
Kết quả khi giá trị viewmore của state được update lại bằng true
Chuyển đổi Function component thành Class component
Để sử dụng state, những phương thức lifecycle và những tác vụ khác, ta phải chuyển function component thành class component, hãy xem qua tiến trình đơn thuần và giản dị sau để quy đổi nhé:
Bước 1: Tạo một class ES6 cùng tên với function cần chuyển, và cho class đó thừa kế lớp cơ sở React.Component.
Bước 2: Thêm một phương thức render() rỗng trong class.
Bước 3: Di chuyển nội dung của function 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() nếu có.
Bước 5: Xóa function rỗng ban sơ.
function DetailPost(props)
return
Title: props.title
;
class DetailPost extends React.Component
render()
return
Title: this.props.title
;
Sử dụng state đúng phương pháp dán ra làm sao?
Không update trực tiếp giá trị của state
Để update lại giá trị của state, toàn bộ chúng ta không thể gán giá trị trực tiếp vào state như this.state = ‘key’: ‘new value’, mà buộc phải sử dụng phương thức setState() của React.
Nơi duy nhất bạn cũng trọn vẹn có thể gán this.state là ở hàm khởi tạo (constructor).
Cập nhật state trọn vẹn có thể là yếu tố không tương đương bộ (Asynchronous)
Bởi vì this.state và this.props trọn vẹn có thể được update sự không tương đương bộ, nên lúc toàn bộ chúng ta nhờ vào giá trị của chúng để tính toán state tiếp theo thì nhiều vô kể trường hợp sẽ bị sai.
Trường hợp này trọn vẹn có thể sai tài liệu
Arrow function
Function thường
State update những biến độc lập
State gộp object ta phục vụ vào state hiện tại khi ta gọi setState().
Khi state là một object chứa nhiều key, thì khi gọi setState(), state chỉ update những key với value được truyền vào và không thay đổi những key còn sót lại.
Ví dụ, ta khai báo một state với những key độc lập:
constructor(props)
super(props);
this.state =
comments: [],
tags: [],
author: ”
;
Sau đó ta chỉ update giá trị cho key thiết yếu:
this.setState(
tags: [‘react’, ‘post’]
);
React sẽ so sánh object được truyền vào hàm setState() với state hiện tại một cách shallow (so sánh nông), nên lúc đó chỉ key tags được update lại giá trị mới, những key còn sót lại sẽ tiến hành không thay đổi 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 một component, nên một component khác muốn truy vấn đến state của một component khác là yếu tố không thể.
Một component cha trọn vẹn có thể truyền state của nó xuống một component con như một props để component con trọn vẹn có thể sử dụng. Ví dụ:
function DetailPost()
return
Title: this.props.title
;
class WikiPost extends React.Component
constructor(props)
super(props);
this.state =
title: “”,
;
render()
return ;
Component con DetailPost sẽ nhận title trong props của nó từ state của component cha WikiPost. Khi title ở state của component cha thay đổi, props của component con sẽ thay đổi theo. Vì thế, cả component WikiPost và DetailPost đều sẽ tiến hành render lại.
Đây được gọi là luồng tài liệu ‘top-down’ hoặc ‘unidirectional’.
Lưu ý: Mỗi khi giá trị của state hoặc props thay đổi thì component sẽ tiến hành render lại.
Nhưng có những lúc toàn bộ chúng ta update state nhưng không thích phải render lại component thì sao? Việc này sẽ tiến hành xử lý trong những lifecycle của component. Bạn trọn vẹn có thể tìm hiểu về life cycle của một component trong React ở nội dung bài viết sau.
Bài viết có tìm hiểu thêm thông tin tại link: 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 Center, 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 thay mặt thay mặt: 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 phí: 1800 6734Email: sales@.orgWebsite: www..org
Tags: Kiến thức Reactjs
Video ReactJS: State là gì? Cách sử dụng state đúng phương pháp dán trong React mới nhất?
Bann đang tìm kiếm từ khóa ReactJS: State là gì? Cách sử dụng state đúng phương pháp dán trong React 2022-11-03 14:55:44 san sẻ Thủ Thuật về trong nội dung bài viết một cách Chi Tiết.
#ReactJS #State #là #gì #Cách #sử #dụng #state #đúng #cách #trong #React ReactJS: State là gì? Cách sử dụng state đúng phương pháp dán trong React
===> Nếu bạn có thắc mắc hay yếu tố gì nội dung bài viết trọn vẹn có thể để lại phản hồi cuối bài nhé.