Thành phần React - Đạo cụ và trạng thái trong ReactJS với các ví dụ

'Trong React, mọi thứ đều là một thành phần'

Nếu bạn đã quen thuộc với React thì chắc hẳn bạn đã nghe hoặc đọc cụm từ này nhiều lần. Nhưng bạn có biết chính xác nó có nghĩa là gì và nó được sử dụng như thế nào không? Nếu bạn chưa biết, hãy đọc blog này để tìm hiểu tất cả về các thành phần React và các giai đoạn khác nhau trong vòng đời. Tôi chắc chắn vào thời điểm bạn hoàn thành đọc blog này, bạn sẽ có hiểu biết đầy đủ về các thành phần React và các khái niệm xung quanh nó. Nhưng trước khi tiếp tục, hãy xem nhanh các chủ đề tôi sẽ thảo luận:

• Các thành phần React là gì?
• Ưu điểm của các thành phần React
• Đạo cụ
• Những trạng thái
• Kỳ vs Đạo cụ
• Vòng đời của thành phần phản ứng

Các thành phần React là gì?

Trước đó, các nhà phát triển phải viết 1000 dòng mã để phát triển một ứng dụng trang đơn giản. Hầu hết các ứng dụng đó đều tuân theo cấu trúc DOM truyền thống và việc thay đổi chúng là rất khó khăn và là một nhiệm vụ tẻ nhạt đối với các nhà phát triển.Họ phải tự tìm kiếm phần tử cần thay đổi và cập nhật nó cho phù hợp. Ngay cả một sai sót nhỏ cũng có thể dẫn đến lỗi ứng dụng. Hơn nữa, cập nhật DOM rất tốn kém. Do đó, cách tiếp cận dựa trên thành phần đã được giới thiệu. Theo cách tiếp cận này, toàn bộ ứng dụng được chia thành các phần hợp lý được gọi là Thành phần. React là một trong những framework đã chọn cách tiếp cận này.Nếu bạn đang có kế hoạch xây dựng sự nghiệp của mình trong lĩnh vực phát triển web, việc bắt đầu sớm sẽ mở ra rất nhiều cơ hội cho bạn.

Bây giờ chúng ta hãy hiểu những thành phần này là gì.

Các thành phần React được coi là khối xây dựng của Giao diện người dùng. Mỗi thành phần này tồn tại trong cùng một không gian nhưng thực thi độc lập với nhau. Các thành phần React có cấu trúc, phương thức cũng như API riêng của chúng. Chúng có thể tái sử dụng và có thể được đưa vào các giao diện theo nhu cầu. Để hiểu rõ hơn, hãy coi toàn bộ giao diện người dùng như một cây.Ở đây thành phần bắt đầu trở thành gốc và mỗi phần độc lập trở thành các nhánh, chúng được chia thành các nhánh con.

Điều này giữ cho giao diện người dùng của chúng ta được tổ chức và cho phép dữ liệu và trạng thái thay đổi một cách hợp lý từ gốc đến các nhánh rồi đến các nhánh con. Các thành phần thực hiện lệnh gọi đến máy chủ trực tiếp từ phía máy khách, cho phép DOM cập nhật động mà không cần làm mới trang. Điều này là do các thành phần phản ứng được xây dựng dựa trên khái niệm về các yêu cầu AJAX. Mỗi thành phần có giao diện riêng có thể thực hiện các cuộc gọi đến máy chủ và cập nhật chúng. Vì các thành phần này độc lập với nhau nên mỗi thành phần có thể làm mới mà không ảnh hưởng đến các thành phần khác hoặc toàn bộ giao diện người dùng.

Chúng tôi sử dụng React.createClass () để tạo một thành phần. Phương thức này phải được truyền một đối số đối tượng sẽ xác định thành phần React. Mỗi thành phần phải chứa chính xác một kết xuất () phương pháp. Đây là thuộc tính quan trọng nhất của một thành phần chịu trách nhiệm phân tích cú pháp HTML trong JavaScript, JSX. Điều này kết xuất () sẽ trả về biểu diễn HTML của thành phần dưới dạng nút DOM. Do đó, tất cả các thẻ HTML phải được đặt trong một thẻ bao bên trong kết xuất () .

Sau đây là mã mẫu để tạo một thành phần.

import React từ 'react' nhập ReactDOM từ lớp 'react-dom' MyComponent mở rộng React.Component {render () {return (
Id của bạn là {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))

Kỳ vs Đạo cụ

Vòng đời của thành phần phản ứng

React cung cấp nhiều phương thức khác nhau thông báo khi một giai đoạn nhất định trong vòng đời của một thành phần xảy ra. Các phương pháp này được gọi là phương pháp vòng đời. Các phương pháp vòng đời này không phức tạp lắm. Bạn có thể coi các phương thức này như các trình xử lý sự kiện chuyên biệt được gọi ở các điểm khác nhau trong vòng đời của các thành phần. Bạn thậm chí có thể thêm mã của riêng mình vào các phương thức này để thực hiện các tác vụ khác nhau. Nói về vòng đời của linh kiện, vòng đời được chia thành 4 giai đoạn. Họ đang:

1. Giai đoạn đầu
2. Đang cập nhật giai đoạn
3. Đạo cụ thay đổi giai đoạn
4. Giai đoạn tháo dỡ

Mỗi giai đoạn này chứa một số phương pháp vòng đời chỉ dành riêng cho chúng. Vì vậy, bây giờ chúng ta hãy tìm hiểu điều gì sẽ xảy ra trong mỗi giai đoạn này.

a. Giai đoạn đầu - Giai đoạn đầu tiên của vòng đời của một thành phần React là giai đoạn đầu tiên hoặc giai đoạn kết xuất ban đầu. Trong giai đoạn này,thành phần sắp bắt đầu cuộc hành trình và tìm đường đến DOM. Giai đoạn này bao gồm các phương thức sau được gọi theo thứ tự được xác định trước.

1. getDefaultProps (): Phương thức này được sử dụng để chỉ định giá trị mặc định của this.props . Nó được gọi trước khi thành phần của bạn thậm chí được tạo hoặc bất kỳ đạo cụ nào từ cha mẹ được chuyển vào nó.
2. getInitialState (): Phương pháp này được sử dụng đểxác định giá trị mặc định của this.state trước khi thành phần của bạn được tạo.
3. componentWillMount (): Đây là phương thức cuối cùng mà bạn có thể gọi trước khi thành phần của bạn được kết xuất vào DOM. Nhưng nếu bạn gọi setState () bên trong phương thức này, thành phần của bạn sẽ không hiển thị lại.
4. kết xuất (): Thứ tự là phương thức chịu trách nhiệm trả về một nút HTML gốc duy nhất và phải được xác định trong mỗi và mọi thành phần. Bạn có thể trở lại vô giá trị hoặc là sai trong trường hợp bạn không muốn hiển thị bất cứ thứ gì.
5. componentDidMount (): Sau khi thành phần được hiển thị và đặt trên DOM, điều này phương thức được gọi. Tại đây bạn có thể thực hiện bất kỳ thao tác truy vấn DOM nào.

b. Đang cập nhật giai đoạn - Khi thành phần được thêm vào DOM, chúng chỉ có thể cập nhật và hiển thị lại khi xảy ra thay đổi trạng thái. Mỗi khi trạng thái thay đổi, thành phần sẽ gọi kết xuất () lần nữa. Bất kỳ thành phần nào dựa vào đầu ra của thành phần này cũng sẽ gọi kết xuất () lần nữa. Điều này được thực hiện để đảm bảo rằng thành phần của chúng tôi đang hiển thị phiên bản mới nhất của chính nó. Do đó, để cập nhật thành công trạng thái các thành phần, các phương thức sau được gọi theo thứ tự nhất định:

1. shouldComponentUpdate (): Sử dụng phương pháp này, bạn có thể kiểm soát hành vi cập nhật chính thành phần của mình. Nếu bạn trả về một true từ phương thức này,thành phần sẽ cập nhật. Khác nếu phương thức này trả vềsai, thành phần sẽ bỏ qua cập nhật.
2. componentWillUpdate (): Tphương pháp của anh ấy được gọi là just trước khi thành phần của bạn sắp được cập nhật. Trong phương pháp này, bạn không thể thay đổi trạng thái thành phần của mình bằng cách gọi this.setState .
3. kết xuất (): Nếu bạn trả về false qua shouldComponentUpdate () , mã bên trong kết xuất () sẽ được gọi lại để đảm bảo rằng thành phần của bạn tự hiển thị đúng cách.
4. componentDidUpdate (): Khi thành phần được cập nhật và hiển thị, thì phương thức này sẽ được gọi. Bạn có thể đặt bất kỳ mã nào bên trong phương thức này, mà bạn muốn thực thi sau khi thành phần được cập nhật.

c. Giai đoạn thay đổi đạo cụ - Sau thành phần đã được kết xuất vào DOM, thời điểm duy nhất thành phần sẽ cập nhật, ngoài thay đổi trạng thái là khi giá trị prop của nó thay đổi. Thực tế giai đoạn này hoạt động tương tự như giai đoạn trước, nhưng thay vì trạng thái, nó xử lý các đạo cụ. Do đó, giai đoạn này chỉ có một phương thức bổ sung từ Giai đoạn cập nhật.

sự kiện trong javascript là gì

1. componentWillReceiveProps (): Phương thức này trả về một đối số chứa giá trị prop mới sắp được gán cho thành phần.
   Phần còn lại của các phương thức vòng đời hoạt động giống hệt với các phương thức mà chúng ta đã thấy trong giai đoạn trước.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. kết xuất ()
5. componentDidUpdate ()

d.Giai đoạn tháo lắp -Đây là giai đoạn cuối cùng của vòng đời các thành phần, trong đó thành phần bị phá hủy và loại bỏ hoàn toàn khỏi DOM. Nó chỉ chứa một phương thức:

1. componentWillUnmount (): Khi phương thức này được gọi, thành phần của bạn sẽ bị xóa vĩnh viễn khỏi DOM.Trong phương pháp này, You có thể thực hiện bất kỳ tác vụ nào liên quan đến dọn dẹp như xóa trình nghe sự kiện, dừng hẹn giờ, v.v.

Sau đây là toàn bộ sơ đồ vòng đời:

Phần này sẽ đưa chúng ta đến phần cuối của blog về React Components. Tôi hy vọng trong blog này, tôi có thể giải thích rõ ràng các Thành phần React là gì, cách chúng được sử dụng. Bạn có thể tham khảo blog của tôi trên , trong trường hợp bạn muốn tìm hiểu thêm về ReactJS.

Nếu bạn muốn được đào tạo về React và muốn tự phát triển giao diện người dùng thú vị, hãy xem của Edureka, một công ty học trực tuyến đáng tin cậy với mạng lưới hơn 250.000 người học hài lòng trải dài trên toàn cầu.

Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần bình luận và chúng tôi sẽ liên hệ lại với bạn.