Bạn đang xem : Thứ tự vòng đời của thành phần phản ứng

Trang này giới thiệu khái niệm về trạng thái và vòng đời trong thành phần React. Bạn có thể tìm thấy tài liệu tham khảo chi tiết về API thành phần tại đây .

Hãy xem xét ví dụ về đồng hồ tích tắc từ một trong các phần trước . Trong Phần tử kết xuất , chúng tôi chỉ biết được một cách để cập nhật giao diện người dùng. Chúng tôi gọi root.render () để thay đổi kết quả hiển thị:

  

const

root

= < / p> ReactDOM

.

createRoot

(

document

.

getElementById

(

'gốc '

)

)

;

chức năng

đánh dấu

(

)

{

const

phần tử

=

(

& lt;

div

& gt; < / p>

& lt;

h1 < / p>

& gt;

Xin chào mọi người!

& lt; /

h1

& gt;

< p class = "token pure-text">

& lt;

h2 < / p>

& gt;

Đó là

{< / p>

new

Ngày

(

)

.

toLocaleTimeString

(< / p>

)

}

.

& lt; /

h2

& gt;

& lt; /

div

& gt;

)

;

root

.

hiển thị

(

phần tử

)

;

}

setInterval

(

đánh dấu

,

1000

)

;

Dùng thử trên CodePen

Trong phần này, chúng ta sẽ tìm hiểu cách làm cho thành phần Clock thực sự có thể tái sử dụng và đóng gói. Nó sẽ tự thiết lập bộ đếm thời gian và tự cập nhật mỗi giây.

Chúng ta có thể bắt đầu bằng cách tóm tắt giao diện của đồng hồ:

  

const

root

= < / p> ReactDOM

.

createRoot

(

document

.

getElementById

(

'gốc '

)

)

;

function

Đồng hồ

(

đạo cụ

)

{

trả về

(

& lt;

div

& gt;

& lt;

h1

& gt;

Xin chào mọi người!

& lt; / h1

& gt;

& lt;

h2

& gt;

Đó là

{

đạo cụ

.

date

.

toLocaleTimeString

(

)

}

.

& lt; /

h2

& gt;

& lt; /

div

& gt;

)

;

}

chức năng

đánh dấu

(

)

{

root

.

hiển thị

(

& lt;

Đồng hồ

ngày tháng

=

{

mới

Ngày

< p class = "dấu chấm câu"> (

)

}

/ & gt;

)

;

}

setInterval

(

đánh dấu

,

1000

)

;

Dùng thử trên CodePen

Tuy nhiên, nó thiếu một yêu cầu quan trọng: thực tế là Clock thiết lập bộ đếm thời gian và cập nhật giao diện người dùng mỗi giây phải là chi tiết triển khai của < code class = "gatsby-code-text"> Đồng hồ .

Tốt nhất là chúng tôi muốn viết điều này một lần và tự cập nhật Đồng hồ :

  root 

.

kết xuất < / p>

(

& lt;

Đồng hồ

/ & gt;

)

;

Để triển khai điều này, chúng ta cần thêm “state” vào Đồng hồ thành phần.

Trạng thái tương tự như đạo cụ, nhưng nó là riêng tư và được kiểm soát hoàn toàn bởi thành phần.

Chuyển đổi một hàm thành một lớp

Bạn có thể chuyển đổi một thành phần chức năng như Clock thành một lớp trong năm bước:

  1. Tạo một lớp ES6 , có cùng tên, mở rộng React.Component < / code>.
  2. Thêm một phương thức trống duy nhất vào nó được gọi là render () .
  3. Di chuyển nội dung của hàm vào phương thức render () .
  4. Thay thế props bằng this.props trong render () body.
  5. Xóa phần khai báo chức năng trống còn lại.
  

class

Đồng hồ

mở rộng

React

.

Thành phần

< p class = "dấu chấm câu"> {

kết xuất

(

)

{

trả về

(

& lt;

div

& gt;

& lt;

h1

& gt;

Xin chào mọi người!

& lt; /

h1

& gt;

& lt;

h2

& gt;

Đó là

{

cái này

.

đạo cụ

.

date

.

toLocaleTimeString

(

)

}

.

& lt ; /

h2

& gt;

& lt; /

div

& gt;

)

;

}

}

Hãy thử trên CodePen

Đồng hồ hiện được định nghĩa là một lớp chứ không phải là một hàm.

Phương thức render sẽ được gọi mỗi khi cập nhật xảy ra, nhưng miễn là chúng tôi kết xuất & lt ; Đồng hồ / & gt; vào cùng một nút DOM, chỉ một phiên bản duy nhất của lớp Đồng hồ sẽ được sử dụng. Điều này cho phép chúng tôi sử dụng các tính năng bổ sung như trạng thái cục bộ và các phương thức vòng đời.

Thêm trạng thái cục bộ vào lớp

Chúng tôi sẽ chuyển date từ props sang trạng thái trong ba bước:

  1. Thay thế this.props.date bằng this.state.date trong < code class = "gatsby-code-text"> phương thức render () :
  

class

Đồng hồ

mở rộng

React

.

Thành phần

< p class = "dấu chấm câu mã thông báo"> {

kết xuất

(

)

{

trả về

(

& lt;

div

& gt; < / p>

& lt;

h1 < / p>

& gt;

Xin chào mọi người!

& lt; /

h1

& gt;

< p class = "token pure-text">

& lt;

h2

& gt;

Đó là < / p>

{

cái này

.

bang

.

date

.

toLocaleTimeString

(< / p>

)

}

.

& lt; /

h2

& gt;

& lt; /

div

& gt;

)

;

}

}

  1. Thêm hàm tạo lớp để chỉ định this.state :
  

class

Đồng hồ

mở rộng

React

.

Thành phần

{

hàm tạo

(

đạo cụ

)

{

super

(

đạo cụ

)

;

this

.

bang

=

{

ngày

:

mới

Ngày

(

)

}

;

}

kết xuất

(

)

{

trả về

(

& lt;

div

& gt; < / p>

& lt;

h1 < / p>

& gt;

Xin chào mọi người!

& lt; /

h1

& gt;

< p class = "token pure-text">

& lt;

h2 < / p>

& gt;

Đó là

{< / p>

cái này

.

bang

.

date

.

toLocaleTimeString

(

) < / p>

}

.

& lt; /

h2

& gt;

& lt; /

div

& gt;

)

;

}

}

Lưu ý cách chúng tôi chuyển props vào hàm tạo cơ sở :

  

hàm tạo

(

đạo cụ

)

{

super

(

props

)

;

cái này

. < / p> trạng thái

=

{

ngày

< p class = "token operator">:

new

Ngày

(

)

}

;

}

Các thành phần lớp phải luôn gọi hàm tạo cơ sở với props .

  1. Xóa phần tử date khỏi phần tử & lt; Clock / & gt; : < / li>
  root 

.

kết xuất < / p>

(

& lt;

Đồng hồ

/ & gt;

)

;

Sau đó, chúng tôi sẽ thêm lại mã bộ đếm thời gian vào chính thành phần đó.

Kết quả trông như thế này:

  

class

Đồng hồ

mở rộng

React

.

Thành phần

< p class = "dấu chấm câu mã thông báo"> {

hàm tạo

(

đạo cụ

)

{

super

(

props

)

;

this

.

bang

=

{

ngày

:

mới

Ngày

(

)

} < / p>

;

}

< / p>

kết xuất

(

)

{

trả về

(

& lt;

div

& gt; < / p>

& lt;

h1 < / p>

& gt;

Xin chào mọi người!

& lt; /

h1

& gt;

< p class = "token pure-text">

& lt;

h2

& gt;

Đó là < / p>

{

cái này

.

bang

.

date

.

toLocaleTimeString

(< / p>

)

}

.

& lt; /

h2

& gt;

& lt; /

div

& gt;

)

;

}

}

const

root

=

ReactDOM

.

createRoot

(

document

.

getElementById

(

'gốc'

)

)

;

root

.

hiển thị

(

& lt;

Đồng hồ

/ & gt;

)

;

Hãy thử trên CodePen < / span>

Tiếp theo, chúng tôi sẽ làm cho Đồng hồ thiết lập bộ đếm thời gian của riêng nó và tự cập nhật mỗi giây.

Thêm các phương thức vòng đời vào một lớp

Trong các ứng dụng có nhiều thành phần, điều rất quan trọng là phải giải phóng tài nguyên do các thành phần này sử dụng khi chúng bị phá hủy.

Chúng tôi muốn thiết lập bộ hẹn giờ bất cứ khi nào Đồng hồ được hiển thị vào DOM lần đầu tiên. Đây được gọi là "gắn kết" trong React.

Chúng tôi cũng muốn xóa bộ đếm thời gian đó bất cứ khi nào DOM được tạo bởi Đồng hồ bị xóa. Điều này được gọi là "ngắt kết nối" trong React.

Chúng ta có thể khai báo các phương thức đặc biệt trên lớp thành phần để chạy một số mã khi một thành phần gắn kết và ngắt kết nối:

  

class

Đồng hồ

mở rộng

React

.

Thành phần

< p class = "dấu chấm câu mã thông báo"> {

hàm tạo

(

đạo cụ

)

{

super

(

đạo cụ

)

;

this

.

state

=

{

ngày

:

mới

Ngày

(

)

}

;

}

componentDidMount

(

)

{

}

componentWillUnmount

(

)

{

}

kết xuất

(

)

{

trả về

(

& lt;

div

& gt; < / p>

& lt;

h1 < / p>

& gt;

Xin chào mọi người!

& lt; /

h1

& gt;

< p class = "token pure-text">

& lt;

h2 < / p>

& gt;

Đó là

{< / p>

cái này

.

bang

.

date

.

toLocaleTimeString

(

) < / p>

}

.

& lt; /

h2

& gt;

& lt; /

div

& gt;

)

;

}

}

Những phương thức này được gọi là "phương thức vòng đời".

Phương thức componentDidMount () chạy sau khi kết xuất thành phần được hiển thị cho DOM. Đây là một nơi tốt để thiết lập bộ hẹn giờ:

  

componentDidMount

(

)

{

this

.

timerID

=

setInterval

(

(

)

= & gt;

cái này

.

đánh dấu vào

(< / p>

)

,

< p class = "số mã thông báo"> 1000

)

;

}

Lưu ý cách chúng tôi lưu ID hẹn giờ ngay trên this ( this.timerID ).

Trong khi this.props được thiết lập bởi chính React và this.state có ý nghĩa đặc biệt, bạn có thể tự do thêm các trường bổ sung vào lớp theo cách thủ công nếu bạn cần lưu trữ thứ gì đó không tham gia vào luồng dữ liệu (chẳng hạn như ID bộ hẹn giờ).

Chúng tôi sẽ loại bỏ bộ đếm thời gian trong phương thức vòng đời của componentWillUnmount () :

  

componentWillUnmount

(

)

{

clearInterval

(

cái này

.

timerID

)

;

< / p>

}

Cuối cùng, chúng ta sẽ triển khai một phương thức có tên là tick ( ) rằng thành phần Clock sẽ chạy mỗi giây.

Nó sẽ sử dụng this.setState () để lên lịch cập nhật cho trạng thái cục bộ của thành phần:

  

class

Đồng hồ

mở rộng

React

.

Thành phần

< p class = "dấu chấm câu mã thông báo"> {

hàm tạo

(

đạo cụ

)

{

super

(

đạo cụ

)

;

this

.

state

=

{

ngày

:

mới

Ngày

(

)

}

;

}

componentDidMount

(

)

{

this

.

timerID

=

setInterval

(

(

)

= & gt;

cái này

.

đánh dấu

(

)

,

1000

)

;

}

componentWillUnmount

(

)

{

clearInterval

(

cái này

.

timerID

)

;

}

đánh dấu

(

)

{

this

.

setState

(

{

date

:

new

Ngày

(

)

}

)

;

}

kết xuất

(

)

{

trả về

(

& lt;

div

& gt; < / p>

& lt;

h1 < / p>

& gt;

Xin chào mọi người!

& lt; /

h1

& gt;

< p class = "token pure-text">

& lt;

h2 < / p>

& gt;

Đó là

{< / p>

cái này

.

trạng thái

.

date

.

toLocaleTimeString

(

)

}

.

& lt; /

h2

& gt ;

& lt; /

div

& gt;

)

;

}

}

const

root

=

ReactDOM

.

createRoot

(

document

.

getElementById

(

'gốc'

)

)

;

root

.

kết xuất

(

& lt;

Đồng hồ

/ & gt;

)

;

Hãy thử trên CodePen

Giờ đây, đồng hồ tích tắc từng giây.

Hãy nhanh chóng tóm tắt lại những gì đang diễn ra và thứ tự gọi các phương pháp:

  1. Khi & lt; Clock / & gt; được chuyển đến root.render () , React gọi hàm tạo của thành phần Clock . Vì Clock cần hiển thị thời gian hiện tại, nó sẽ khởi tạo this.state với một đối tượng bao gồm thời điểm hiện tại. Chúng tôi sẽ cập nhật trạng thái này sau.
  2. Sau đó, React gọi phương thức Clock component’s render () . Đây là cách React tìm hiểu những gì sẽ được hiển thị trên màn hình. Sau đó, React cập nhật DOM để khớp với kết xuất hiển thị của Clock .
  3. Khi đầu ra Clock được chèn vào DOM, React sẽ gọi componentDidMount () phương pháp vòng đời. Bên trong nó, thành phần Clock yêu cầu trình duyệt thiết lập bộ đếm thời gian để gọi tick () phương thức mỗi giây một lần.
  4. Mỗi giây, trình duyệt gọi phương thức tick () . Bên trong nó, thành phần Clock lên lịch cập nhật giao diện người dùng bằng cách gọi setState () với một đối tượng chứa thời gian hiện tại. Nhờ lệnh gọi setState () , React biết trạng thái đã thay đổi và gọi render () < / code> một lần nữa để tìm hiểu những gì sẽ hiển thị trên màn hình. Lần này, this.state.date trong phương thức render () sẽ khác, và như vậy kết xuất đầu ra sẽ bao gồm thời gian được cập nhật. React cập nhật DOM cho phù hợp.
  5. Nếu thành phần Clock bị xóa khỏi DOM, React sẽ gọi componentWillUnmount () phương thức vòng đời để bộ hẹn giờ bị dừng.

Trạng thái Sử dụng Chính xác

Có ba điều bạn nên biết về setState () .

Không trực tiếp sửa đổi trạng thái

Ví dụ: điều này sẽ không hiển thị lại một thành phần:

 

this

.

bang

.

bình luận

=

'Xin chào'

;

Thay vào đó , sử dụng setState () :

 

this

.

setState

(

{

nhận xét

:

'Xin chào'

}

)

;

Nơi duy nhất bạn có thể gán này. trạng thái là hàm tạo.

React có thể ghép nhiều lệnh gọi setState () vào một bản cập nhật duy nhất để tăng hiệu suất.

this.props this.state có thể được cập nhật không đồng bộ, bạn nên không dựa vào các giá trị của chúng để tính toán trạng thái tiếp theo.

Ví dụ: mã này có thể không cập nhật được bộ đếm:

 

this

.

setState

(

{

bộ đếm

:

cái này

.

bang

.

counter

+

cái này < / p>

.

đạo cụ

.

tăng

,

}

)

;

Để khắc phục, hãy sử dụng dạng thứ hai của setState () chấp nhận một hàm chứ không phải một đối tượng. Hàm đó sẽ nhận trạng thái trước đó làm đối số đầu tiên và các đạo cụ tại thời điểm cập nhật được áp dụng làm đối số thứ hai:

 

this

.

setState

(

(

trạng thái

,

đạo cụ

< p class = "dấu chấm câu">)

= & gt;

(

{

bộ đếm

:

bang

.

bộ đếm

+

đạo cụ

.

}

)

)

;

Chúng tôi đã sử dụng hàm mũi tên ở trên, nhưng nó cũng hoạt động với các hàm thông thường :

 

this

.

setState

(

chức năng

(

trạng thái

,

đạo cụ

)

{

trả về

{

bộ đếm

:

bang

.

bộ đếm

+

đạo cụ

.

}

;

}

)

;

Khi bạn gọi setState () , React sẽ hợp nhất đối tượng bạn cung cấp vào trạng thái hiện tại.

Ví dụ: trạng thái của bạn có thể chứa một số biến độc lập:

  

hàm tạo

(

đạo cụ

)

{

super

(

đạo cụ

)

;

this

.

state

=

{

bài đăng

:

[

]

,

nhận xét

:

[

]

}

;

}

Sau đó, bạn có thể cập nhật chúng một cách độc lập với setState () cuộc gọi:

  

componentDidMount

(

)

{

fetchPosts

(

)

.

thì

(

phản hồi

= & gt;

{

this

setState

> (

{

bài đăng

:

response

.

bài đăng

}

)

;

}

)

;

fetchComments

(

)

.

thì

(

phản hồi

= & gt;

{

this

setState

> (

{

nhận xét

:

response

.

nhận xét

}

)

;

}

)

;

}

Quá trình hợp nhất chưa chặt chẽ, vì vậy this.setState ({comments}) rời khỏi nguyên vẹn, nhưng thay thế hoàn toàn .

Dữ liệu chảy xuống

Cả thành phần cha và con đều không thể biết liệu một thành phần nhất định là trạng thái hay không trạng thái và họ không nên quan tâm liệu nó được định nghĩa là một hàm hay một lớp

Đây là lý do tại sao trạng thái thường được gọi là cục bộ hoặc được đóng gói. Nó không thể truy cập được đối với bất kỳ thành phần nào khác ngoài thành phần sở hữu và thiết lập nó.

Một thành phần có thể chọn chuyển trạng thái của nó xuống dưới dạng đạo cụ cho các thành phần con của nó:

 

& lt;

FormattedDate

date

=

{

this

. trạng thái

.

date

}

/ & gt;

Thành phần FormattedDate sẽ nhận được đồng hồ không được biết liệu nó đến từ trạng thái đồng hồ , từ đồng hồ 's props, hoặc được gõ bằng tay:

 

chức năng

FormattedDate

p>

(

đạo cụ

)

{

trả về

& lt;

h2

& gt;

Đó là

{ đạo cụ

.

date

.

toLocaleTimeString

(

)

}

.

& lt; /

h2

& gt;

;

}

Hãy thử trên CodePen >

Đây thường được gọi là luồng dữ liệu “từ trên xuống” hoặc “một chiều”. Mọi trạng thái luôn được sở hữu bởi một số thành phần cụ thể và mọi dữ liệu hoặc giao diện người dùng bắt nguồn từ trạng thái đó chỉ có thể ảnh hưởng đến các thành phần “bên dưới” chúng trong cây

Nếu bạn tưởng tượng cây thành phần như một thác nước của các đạo cụ, thì trạng thái của mỗi thành phần giống như một nguồn nước bổ sung tham gia vào nó tại một điểm tùy ý nhưng cũng chảy xuống.

Để cho thấy rằng tất cả các thành phần thực sự được tách biệt, chúng tôi có thể tạo thành phần Ứng dụng hiển thị ba & lt ; Đồng hồ & gt; s:

  

function

Ứng dụng

(

)

{

trả về

(

& lt;

div

& gt; < / p>

& lt;

Đồng hồ

/ & gt;

& lt;

Đồng hồ

< / p>

/ & gt;

& lt;

Đồng hồ

/ & gt;

& lt; /

div

& gt;

)

;

}

Hãy thử trên CodePen

Mỗi Đồng hồ thiết lập bộ đếm thời gian và cập nhật riêng một cách độc lập.

Trong ứng dụng React, việc thành phần có trạng thái hay không trạng thái được coi là chi tiết triển khai của thành phần có thể thay đổi theo thời gian. Bạn có thể sử dụng các thành phần không trạng thái bên trong các thành phần trạng thái và ngược lại.


Xem thêm những thông tin liên quan đến chủ đề phản ứng thứ tự vòng đời của thành phần

Kinh ĐẠI PHƯƠNG TIỆN PHẬT BÁO ÂN 1 - Quyển Thứ 1_ Phẩm Tự Thứ Nhất - Thích Nữ Nguyên Chủng

  • Tác giả: Thích nữ Nguyên Chủng
  • Ngày đăng: 2022-06-22
  • Đánh giá: 4 ⭐ ( 6611 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kinh ĐẠI PHƯƠNG TIỆN PHẬT BÁO ÂN,  do Dịch giả Thích Chính Tiến – Thích Quảng Độ dịch từ bản Hán văn, thuộc Đại Chánh tạng, tập T03, kinh số 156.
    Chùa Di Đà, huyện Củ Chi xin thành kính cúng dường đến đại chúng, nguyện cho tất cả hành giả thấy nghe đều được lợi lạc. Nguyện đem công đức này hồi hướng cho khắp mười phương pháp giới chúng sanh, trên đền bốn ân, dưới cứu tam đồ, cầu cho thế giới hòa bình, tất cả chúng sanh đều được độ thoát. 
    Nam Mô Hoan Hỷ Tạng Bồ Tát Ma Ha Tát

    ****
    Liên Hệ:
    - Website: Chuaadidacuchi.com
    - Fanpage: Chùa Adida Củ Chi

Vòng đời kiểm thử phần mềm - Khái niệm kiểm thử viên phải nắm rõ

  • Tác giả: t3h.com.vn
  • Đánh giá: 3 ⭐ ( 7166 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vòng đời kiểm thử phần mềm hay còn gọi là STLC giúp thực hiện quá trình kiểm thử một cách thích hợp và kỹ lưỡng. Nó có nhiều giai đoạn cụ thể

Vòng đời phát triển phần mềm – Sciences & Technologies in the World

  • Tác giả: science-technology.vn
  • Đánh giá: 5 ⭐ ( 4866 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Lý thuyết về thứ tự phản ứng

  • Tác giả: diendan.hocmai.vn
  • Đánh giá: 4 ⭐ ( 5456 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phương thức vòng đời phản ứng

  • Tác giả: itzone.com.vn
  • Đánh giá: 4 ⭐ ( 6971 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The ITZone platform Vietnam is the community for anyone interested in news, training seminars, presentations etc in the IT industry

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

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 9778 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tất cả các thành phần React đều trải qua vòng đời cho phép bạn thực hiện một nhiệm vụ cụ thể tại bất kỳ thời điểm cụ thể nào. Để đạt được điều đó, bạn có thể ghi đè các phương thức vòng đời.…

Vòng đời phát triển phần mềm SDLC là gì? Các giai đoạn của SDLC

  • Tác giả: vn.got-it.ai
  • Đánh giá: 5 ⭐ ( 7462 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để có thể xây dựng quy trình kiểm thử phù hợp với hiệu quả tối ưu trong thời gian ngắn thì người kiểm thử viên cần phải nắm rõ vòng đời phát triển phần mềm.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Nordic Coder: Trung tâm dạy lập trình - nodejs cơ bản

By ads_php