Trạng thái và Vòng đời – Phản ứng – phản ứng thứ tự vòng đời của thành phần

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: 

 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. 
 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 . 
 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. 

 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. 

 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. 
 Vì  this.props  và  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.