Các phương pháp vòng đời phản ứng: Một hướng dẫn có thể tiếp cận với các ví dụ – các phương pháp vòng đời trong phản ứng

Tìm hiểu tất cả về các phương thức vòng đời React để gắn, cập nhật, ngắt kết nối và xử lý lỗi, bao gồm các phương pháp mới kể từ React 17.

Bạn đang xem: các phương thức vòng đời trong react

Ghé thăm tôi tại www.ohansemmanuel.com để tìm hiểu thêm về công việc của tôi!

Ghi chú của người biên tập : giới thiệu React Hooks trong React 16.8 đã khiến một số phương pháp được mô tả trong hướng dẫn này lỗi thời. Để biết thêm thông tin chi tiết về cách xử lý trạng thái React và các tính năng trong vòng đời vào năm 2021, hãy xem hướng dẫn tham khảo React Hooks bảng gian lận .

Các phương thức vòng đời của React là gì? Nói một cách dễ hiểu, bạn có thể coi vòng đời của thành phần React là “vòng đời” của một thành phần. Các phương thức vòng đời là một chuỗi các sự kiện xảy ra trong suốt quá trình sinh, phát triển và chết của một thành phần React.

Hướng dẫn toàn diện này nhằm giúp bạn hiểu một cách trực quan các phương pháp vòng đời React là gì và tại sao chúng lại hữu ích. Dưới đây là những gì chúng tôi sẽ đề cập đến:

Để có cái nhìn tổng quan trực quan về những gì chúng ta sẽ trình bày trong hướng dẫn này, sơ đồ sau minh họa cách hoạt động của vòng đời thành phần React:

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

 React Lifecycle Method

Vòng đời của thành phần React là gì?

Trong React, các thành phần trải qua một vòng đời của các sự kiện:

  1. Gắn kết (thêm các nút vào DOM)
  2. Đang cập nhật (thay đổi các nút hiện có trong DOM)
  3. Ngắt kết nối (xóa các nút khỏi DOM)
  4. Xử lý lỗi (xác minh rằng mã của bạn hoạt động và không có lỗi)

Bạn có thể coi những sự kiện này tương ứng là sự ra đời, lớn lên và chết của một thành phần. Xử lý lỗi giống như một cuộc kiểm tra vật lý hàng năm.

Hãy xem một ví dụ đơn giản. Nếu tôi bảo bạn xây dựng thành phần Hello World, bạn có thể viết như sau:

 class HelloWorld mở rộng React.Component {
   kết xuất () {
    trả về & lt; h1 & gt; Xin chào Thế giới & lt; / h1 & gt;
   }
} 

Khi thành phần này được hiển thị và xem trên máy khách, bạn có thể kết thúc với một chế độ xem như sau:

React Lifecycle Hooks: Hello World Ví dụ

 React Lifecycle Hooks: Hello World Ví dụ

Trước khi hiển thị, thành phần sẽ trải qua giai đoạn gắn, cập nhật và ngắt kết nối. Hãy chia nhỏ nó ra.

Việc gắn một thành phần giống như đưa một em bé sơ sinh vào thế giới. Đây là cái nhìn đầu tiên về cuộc sống của thành phần. Ở giai đoạn này, thành phần, bao gồm mã của bạn và nội bộ của React, sau đó sẽ được chèn vào DOM.

Sau giai đoạn gắn kết, thành phần React “phát triển” trong giai đoạn cập nhật. Nếu không có bản cập nhật, thành phần sẽ vẫn như cũ khi nó được tạo ban đầu trong DOM. Như bạn có thể tưởng tượng, nhiều thành phần bạn viết cần được cập nhật, cho dù thông qua thay đổi ở state hay props . Do đó, chúng cũng trải qua giai đoạn cập nhật.

Giai đoạn cuối cùng được gọi là giai đoạn ngắt kết nối. Ở giai đoạn này, thành phần “chết”. Trong thuật ngữ React, nó bị xóa khỏi DOM.

Còn một giai đoạn nữa mà một thành phần React có thể trải qua: giai đoạn xử lý lỗi. Điều này xảy ra khi mã của bạn không chạy hoặc có lỗi ở đâu đó. Hãy coi nó giống như một cuộc thi thể chất hàng năm.

Sơ đồ sau cho thấy vòng đời của React:

Sơ đồ vòng đời phản ứng

 React Lifecycle Diagram

Lưu ý rằng một thành phần React có thể không trải qua mọi giai đoạn. Ví dụ: một thành phần có thể được gắn trong một phút và sau đó ngắt kết nối tiếp theo mà không có bất kỳ bản cập nhật hoặc xử lý lỗi nào. Hình minh họa và ví dụ được mô tả ở trên giả định rằng thành phần trải qua tất cả bốn giai đoạn.

Các phương thức vòng đời React là gì?

Mỗi giai đoạn vòng đời của React có một số phương thức vòng đời mà bạn có thể ghi đè để chạy mã vào những thời điểm cụ thể trong quá trình này. Chúng thường được gọi là phương pháp vòng đời thành phần.

Sơ đồ bên dưới cho thấy các phương thức vòng đời React được liên kết với các giai đoạn gắn kết, cập nhật, bổ sung và các giai đoạn vòng đời lỗi:

Sơ đồ các phương thức vòng đời phản ứng

 Sơ đồ các phương thức vòng đời phản ứng

Gắn các phương pháp vòng đời

Giai đoạn gắn kết đề cập đến giai đoạn trong đó một thành phần được tạo và chèn vào DOM.

Các phương thức sau được gọi theo thứ tự.

1. constructor ()

constructor () là phương thức đầu tiên được gọi khi thành phần được “làm sống động”.

Phương thức khởi tạo được gọi trước khi thành phần được gắn vào DOM. Trong hầu hết các trường hợp, bạn sẽ khởi tạo trạng thái và liên kết các phương thức xử lý sự kiện trong phương thức khởi tạo.

Dưới đây là ví dụ nhanh về phương thức vòng đời của constructor () React đang hoạt động:

 const MyComponent mở rộng React.Component {
  hàm tạo (đạo cụ) {
   siêu (đạo cụ)
    this.state = {
       điểm: 0
    }
    this.handlePoints = this.handlePoints.bind (this)
    }
} 

Cần nhắc lại rằng đây là phương thức đầu tiên được gọi trước khi thành phần được gắn vào DOM. Hàm tạo không phải là nơi bạn đưa ra bất kỳ tác dụng phụ hoặc đăng ký nào, chẳng hạn như trình xử lý sự kiện.

2. static getDerivedStateFromProps ()

static getDerivedStateFromProps là một phương thức vòng đời React mới kể từ React 17 được thiết kế để thay thế componentWillReceiveProps .

Chức năng chính của nó là đảm bảo rằng trạng thái và đạo cụ được đồng bộ hóa khi cần thiết.

Cấu trúc cơ bản của static getDerivedStateFromProps () trông giống như sau:

 const MyComponent mở rộng React.Component {
  ...

  static getDerivedStateFromProps () {
// làm công việc ở đây
  }
} 

static getDerivedStateFromProps () đưa vào trạng thái props :

 ...

  static getDerivedStateFromProps (đạo cụ, trạng thái) {
// làm công việc ở đây
  }

... 

Bạn có thể trả về một đối tượng để cập nhật trạng thái của thành phần:

 ...

  static getDerivedStateFromProps (đạo cụ, trạng thái) {
     trở về {
        điểm: 200 // cập nhật trạng thái với cái này
     }
  }

  ... 

Hoặc bạn có thể trả về null để không cập nhật:

 ...

  static getDerivedStateFromProps (đạo cụ, trạng thái) {
    trả về null
  }

... 

Chính xác thì tại sao phương pháp vòng đời này lại quan trọng? Mặc dù static getDerivedStateFromProps () là một phương thức vòng đời hiếm khi được sử dụng, nhưng nó rất hữu ích trong một số trường hợp nhất định.

Hãy nhớ rằng, phương thức này được gọi (hoặc được gọi) trước khi thành phần được hiển thị cho DOM trên mount ban đầu.

Dưới đây là một ví dụ nhanh để bạn có thể thấy phương thức static getDerivedStateFromProps () đang hoạt động. Hãy xem xét một thành phần đơn giản biểu thị số điểm ghi được của một đội bóng đá. Như bạn có thể mong đợi, số điểm được lưu trữ trong đối tượng trạng thái thành phần:

 class App mở rộng thành phần {
  trạng thái = {
    điểm: 10
  }

  kết xuất () {
    trở về (
      & lt; div className = "Ứng dụng" & gt;
        & lt; header className = "App-header" & gt;
          & lt; img src = {logo} className = "App-logo" alt = "logo" / & gt;
          & lt; p & gt;
            Bạn đã ghi được {this.state.points} điểm.
          & lt; / p & gt;
        & lt; / tiêu đề & gt;
      & lt; / div & gt;
    );
  }
} 

Kết quả như sau:

static getDerivedStateFromProps () Ví dụ

 static getDerivedStateFromProps () Ví dụ

Nội dung có nội dung “bạn đã ghi được 10 điểm” trong đó 10 là số điểm trong đối tượng trạng thái.

Hãy xem một ví dụ khác. Nếu bạn đặt vào phương thức static getDerivedStateFromProps như hình dưới đây, thì số điểm sẽ được hiển thị là bao nhiêu?

 class App mở rộng thành phần {
  trạng thái = {
    điểm: 10
  }
    
  // *******
  // NB: Không phải là cách được khuyến nghị để sử dụng phương pháp này. Chỉ là một ví dụ. Trạng thái ghi đè vô điều kiện ở đây thường được coi là một ý tưởng tồi
  // ********
  static getDerivedStateFromProps (đạo cụ, trạng thái) {
    trở về {
      điểm: 1000
    }
  }
  
  kết xuất () {
    trở về (
      & lt; div className = "Ứng dụng" & gt;
        & lt; header className = "App-header" & gt;
          & lt; img src = {logo} className = "App-logo" alt = "logo" / & gt;
          & lt; p & gt;
            Bạn đã ghi được {this.state.points} điểm.
          & lt; / p & gt;
        & lt; / tiêu đề & gt;
      & lt; / div & gt;
    );
  }
} 

Ngay bây giờ, chúng ta có phương thức vòng đời thành phần static getDerivedStateFromProps trong đó. Nếu bạn nhớ từ giải thích trước, phương thức này được gọi trước khi thành phần được gắn vào DOM. Bằng cách trả về một đối tượng, chúng tôi cập nhật trạng thái của thành phần trước khi nó được hiển thị.

Xem Thêm  hàm round () trong Python - nổi tròn trong trăn

Đây là những gì chúng tôi nhận được:

static getDerivedStateFromProps () Ví dụ

 static getDerivedStateFromProps () Ví dụ

1000 đến từ trạng thái cập nhật trong phương thức static getDerivedStateFromProps .

Ví dụ này có nguồn gốc và không thực sự đại diện cho cách bạn sử dụng phương thức static getDerivedStateFromProps . Nhưng tôi nghĩ việc hiểu những kiến ​​thức cơ bản sẽ rất hữu ích.

Với phương pháp vòng đời này, không có nghĩa là bạn nên cập nhật trạng thái. Có những trường hợp sử dụng cụ thể cho phương thức static getDerivedStateFromProps . Nếu bạn sử dụng nó trong bối cảnh sai, bạn sẽ giải quyết vấn đề với công cụ sai.

Vậy khi nào bạn nên sử dụng phương thức vòng đời static getDerivedStateFromProps ?

Tên phương thức getDerivedStateFromProps bao gồm năm từ: lấy trạng thái dẫn xuất từ ​​đạo cụ. Về cơ bản, static getDerivedStateFromProps cho phép một thành phần cập nhật trạng thái bên trong của nó để đáp ứng với sự thay đổi trong đạo cụ.

static getDerivedStateFromProps Diagram

 static getDerivedStateFromProps Diagram

Trạng thái thành phần theo cách này được gọi là trạng thái dẫn xuất .

Theo quy tắc chung, trạng thái dẫn xuất nên được sử dụng một cách tiết kiệm vì bạn có thể giới thiệu lỗi nhỏ vào ứng dụng của mình nếu bạn không chắc chắn về điều gì bạn đang làm.

3. render ()

Sau khi phương thức static getDerivedStateFromProps được gọi, phương thức vòng đời tiếp theo trong dòng là phương thức render :

Lớp

 MyComponent mở rộng React.Component {
// render là phương thức bắt buộc duy nhất cho một thành phần lớp
   kết xuất () {
    trả về  & lt; h1 & gt; Tiếng hoan hô! & lt; / h1 & gt; 
   }
} 

Nếu bạn muốn hiển thị các phần tử cho DOM, – ví dụ: trả về một số JSX – thì phương thức render là nơi bạn sẽ viết điều này (như được hiển thị ở trên). < / p>

Bạn cũng có thể trả về các chuỗi và số thuần túy, như được hiển thị bên dưới:

Lớp

 MyComponent mở rộng React.Component {
   kết xuất () {
    return  "Hurray" 
   }
} 

Hoặc bạn có thể trả về mảng và đoạn:

Lớp

 MyComponent mở rộng React.Component {
   kết xuất () {
    return  [
          & lt; div key = "1" & gt; Xin chào & lt; / div & gt ;,
          & lt; div key = "2" & gt; Thế giới & lt; / div & gt;
      ] ;
   }
} 

Lớp

 MyComponent mở rộng React.Component {
   kết xuất () {
    trả về  & lt; React.Fragment & gt;
            & lt; div & gt; Xin chào & lt; / div & gt;
            & lt; div & gt; Thế giới & lt; / div & gt;
       & lt; /React.Fragment> 
   }
} 

Nếu bạn không muốn hiển thị bất kỳ thứ gì, bạn có thể trả về boolean hoặc null trong kết xuất phương pháp:

Lớp

 MyComponent mở rộng React.Component {
   kết xuất () {
    trả về null
   }
}

lớp MyComponent mở rộng React.Component {
  // đoán những gì được trả lại ở đây?
  kết xuất () {
    return (2 + 2 === 5) & amp; & amp; & lt; div & gt; Hello World & lt; / div & gt ;;
   }
} 

Cuối cùng, bạn có thể trả về portal từ phương thức kết xuất:

Lớp

 MyComponent mở rộng React.Component {
  kết xuất () {
    return  createPortal  (this.props.children, document.querySelector ("body"));
  }
} 

Một điều quan trọng cần lưu ý về phương thức kết xuất là hàm kết xuất phải thuần túy, tức là không cố sử dụng setState hoặc tương tác với các API bên ngoài.

4. componentDidMount ()

Sau khi render được gọi, thành phần được gắn vào DOM và componentDidMount phương thức được gọi.

Hàm này được gọi ngay sau khi thành phần được gắn vào DOM.

Bạn sẽ sử dụng phương thức vòng đời componentDidMount để lấy nút DOM từ cây thành phần ngay sau khi nó được gắn kết .

Ví dụ: giả sử bạn có một phương thức và muốn hiển thị nội dung của phương thức đó trong một phần tử DOM cụ thể:

 class ModalContent mở rộng React.Component {

  el = document.createElement ("phần");

  componentDidMount () {
    document.querySelector ("body) .appendChild (this.el);
  }
  
  // bằng cách sử dụng một cổng thông tin, nội dung của phương thức sẽ được hiển thị trong phần tử DOM được đính kèm với DOM trong phương thức componentDidMount.

}

Nếu bạn cũng muốn thực hiện các yêu cầu mạng ngay sau khi thành phần được gắn vào DOM, thì đây là một nơi hoàn hảo để thực hiện điều đó:

 componentDidMount () {
  this.fetchListOfTweets () // nơi fetchListOfTweets bắt đầu một yêu cầu netowrk để tìm nạp một danh sách các tweet nhất định.
} 

Bạn cũng có thể thiết lập các đăng ký như bộ hẹn giờ. Đây là một ví dụ:

 // ví dụ: requestAnimationFrame
componentDidMount () {
    window.requestAnimationFrame (this._updateCountdown);
 }

// ví dụ: trình nghe sự kiện
componentDidMount () {
    el.addEventListener ()
} 

Chỉ cần đảm bảo hủy đăng ký khi thành phần ngắt kết nối. Tôi sẽ chỉ cho bạn cách thực hiện việc này khi chúng ta thảo luận về phương pháp vòng đời của componentWillUnmount .

Cập nhật các phương thức vòng đời

Bất cứ khi nào thay đổi được thực hiện đối với state hoặc props của React thành phần, thành phần được kết xuất. Nói một cách dễ hiểu, thành phần được cập nhật. Đây là giai đoạn cập nhật của vòng đời thành phần React.

Vậy những phương thức vòng đời nào được gọi khi thành phần được cập nhật?

static getDerivedStateFromProps là phương thức vòng đời React đầu tiên được gọi trong giai đoạn cập nhật. Tôi đã giải thích phương pháp này trong giai đoạn lắp đặt, vì vậy tôi sẽ bỏ qua.

Chúng tôi đã giải thích phương pháp này khi xem xét giai đoạn vòng đời gắn kết. Điều quan trọng cần lưu ý là phương pháp này được sử dụng trong cả giai đoạn lắp và cập nhật.

Khi phương thức static getDerivedStateFromProps được gọi, phương thức shouldComponentUpdate được gọi là tiếp theo .

Trong hầu hết các trường hợp, bạn sẽ muốn một thành phần kết xuất khi trạng thái hoặc đạo cụ thay đổi. Tuy nhiên, bạn có quyền kiểm soát hành vi này.

shouldComponentUpdate () Phương pháp Vòng đời Phản ứng Ví dụ

shouldComponentUpdate () React Lifecycle Method Ví dụ

Trong phương thức vòng đời này, bạn có thể trả về mã boolean - true hoặc false - và kiểm soát xem thành phần có được kết xuất hay không (ví dụ: khi thay đổi trạng thái hoặc đạo cụ).

Phương pháp vòng đời này chủ yếu được sử dụng cho các biện pháp tối ưu hóa hiệu suất. Tuy nhiên, đây là một trường hợp sử dụng rất phổ biến, vì vậy bạn có thể sử dụng được tích hợp sẵn. . PureComponent khi bạn không muốn một thành phần kết xuất nếu state props không thay đổi.

3. render ()

Sau khi phương thức shouldComponentUpdate được gọi, render được gọi ngay sau đó, tùy thuộc vào giá trị trả về từ shouldComponentUpdate , giá trị này được mặc định thành true .

Phương thức vòng đời getSnapshotBeforeUpdate lưu trữ các giá trị trước đó của trạng thái sau khi DOM được cập nhật. getSnapshotBeforeUpdate () được gọi ngay sau phương thức kết xuất .

Rất có thể, bạn sẽ hiếm khi tiếp cận với phương pháp vòng đời này. Nhưng nó rất hữu ích khi bạn cần lấy thông tin từ DOM (và có thể thay đổi nó) ngay sau khi cập nhật.

Đây là điều quan trọng: giá trị được truy vấn từ DOM trong getSnapshotBeforeUpdate đề cập đến giá trị ngay trước DOM được cập nhật, ngay cả khi phương thức render đã được gọi trước đó.

Hãy nghĩ về cách bạn sử dụng hệ thống kiểm soát phiên bản, chẳng hạn như Git . Một ví dụ cơ bản là bạn viết mã và thực hiện các thay đổi của mình trước khi chuyển sang bản repo.

Giả sử hàm kết xuất được gọi để phân loại các thay đổi của bạn trước khi thực sự chuyển sang DOM. Trước khi cập nhật DOM thực, thông tin được truy xuất từ ​​ getSnapshotBeforeUpdate đề cập đến những thông tin trước khi cập nhật DOM trực quan thực tế.

Các bản cập nhật thực tế cho DOM có thể không đồng bộ, nhưng phương thức vòng đời getSnapshotBeforeUpdate luôn được gọi ngay trước DOM được cập nhật.

Đây là một phương pháp phức tạp, vì vậy hãy xem một ví dụ khác.

Một trường hợp cổ điển trong đó phương thức vòng đời getSnapshotBeforeUpdate có ích trong một ứng dụng trò chuyện. Tôi đã tiếp tục và thêm một ngăn trò chuyện vào ứng dụng mẫu trước:

getSnapshotBeforeUpdate Ví dụ về phương pháp vòng đời phản ứng

 getSnapshotBeforeUpdate Phương pháp Vòng đời Phản ứng Ví dụ

Việc triển khai ngăn trò chuyện rất đơn giản. Trong thành phần Ứng dụng là một danh sách không có thứ tự với thành phần Trò chuyện :

 & lt; ul className = "chat-thread" & gt;
    & lt; Trò chuyện chatList = {this.state.chatList} / & gt;
 & lt; / ul & gt; 

Thành phần Trò chuyện hiển thị danh sách các cuộc trò chuyện và để làm được điều này, nó cần có chatList chống đỡ. Về cơ bản đây là một Mảng. Trong trường hợp này, một mảng gồm 3 giá trị chuỗi, ["Này", "Xin chào", "Xin chào"] .

Thành phần Trò chuyện có cách triển khai đơn giản như sau:

Lớp

 Trò chuyện mở rộng Thành phần {
  kết xuất () {
    trở về (
      & lt; React.Fragment & gt;
        {this.props.chatList.map ((chat, i) = & gt; (
          & lt; li key = {i} className = "chat-bubble" & gt;
            {trò chuyện}
          & lt; / li & gt;
        ))}
      & lt; /React.Fragment>
    );
  }
} 

Nó chỉ ánh xạ thông qua phần hỗ trợ chatList và hiển thị một mục danh sách lần lượt được tạo kiểu bong bóng trò chuyện :).

Trong tiêu đề ngăn trò chuyện là nút Thêm trò chuyện :

getSnapshotBeforeUpdate Ví dụ với nút

 getSnapshotBeforeUpdate Ví dụ Với Nút

Nhấp vào nút này sẽ thêm văn bản trò chuyện mới, "Xin chào", vào danh sách các tin nhắn được hiển thị.

Đây là hoạt động:

getSnapshotBeforeUpdate Ví dụ với Trò chuyện

 getSnapshotBeforeUpdate Ví dụ với Trò chuyện

Vấn đề ở đây, như với hầu hết các ứng dụng trò chuyện là bất cứ khi nào số lượng tin nhắn trò chuyện vượt quá chiều cao khả dụng của cửa sổ trò chuyện, hành vi mong đợi là tự động cuộn xuống ngăn trò chuyện để hiển thị tin nhắn trò chuyện mới nhất. Đó không phải là trường hợp bây giờ:

getSnapshotBeforeUpdate Ví dụ với Hành vi cuộn

 getSnapshotBeforeUpdate Ví dụ với Hành vi cuộn

Hãy xem cách chúng ta có thể giải quyết vấn đề này bằng cách sử dụng phương thức vòng đời getSnapshotBeforeUpdate .

Cách hoạt động của phương thức vòng đời getSnapshotBeforeUpdate là khi nó được gọi, nó sẽ được chuyển các đạo cụ trước đó và nêu dưới dạng đối số.

Vì vậy, chúng ta có thể sử dụng các tham số prevProps prevState như hình dưới đây:

 getSnapshotBeforeUpdate (prevProps, prevState) {
   
} 

Trong phương thức này, bạn phải trả về một giá trị hoặc null :

 getSnapshotBeforeUpdate (prevProps, prevState) {
   giá trị trả về || null // trong đó 'value' là một giá trị JavaScript hợp lệ
} 

Bất kỳ giá trị nào được trả về ở đây sau đó sẽ được chuyển sang một phương thức vòng đời khác. Bạn sẽ sớm hiểu ý tôi.

getSnapshotBeforeUpdate Phương thức vòng đời phản ứng không tự hoạt động. Nó được sử dụng cùng với phương thức vòng đời componentDidUpdate .

Phương thức vòng đời componentDidUpdate được gọi sau getSnapshotBeforeUpdate . Như với phương thức getSnapshotBeforeUpdate , nó nhận các đạo cụ trước đó và trạng thái dưới dạng đối số:

 componentDidUpdate (presProps, prevState) {
 
} 

Tuy nhiên, đó không phải là tất cả.

Bất kỳ giá trị nào được trả về từ phương thức vòng đời getSnapshotBeforeUpdate được chuyển làm đối số thứ ba cho phương thức componentDidUpdate .

Hãy gọi giá trị trả về từ getSnapshotBeforeUpdate , ảnh chụp nhanh và đây là những gì chúng ta nhận được sau đó:

 componentDidUpdate (presProps, prevState, snapshot) {
 
} 

Với kiến ​​thức này, hãy giải quyết vấn đề vị trí cuộn tự động trong trò chuyện.

Để giải quyết vấn đề này, tôi cần nhắc (hoặc dạy) bạn một số hình học DOM. Vì vậy, hãy chịu đựng với tôi.

Trong thời gian chờ đợi, đây là tất cả mã bắt buộc để duy trì vị trí cuộn trong ngăn trò chuyện:

 getSnapshotBeforeUpdate (prevProps, prevState) {
    if (this.state.chatList & gt; prevState.chatList) {
      const chatThreadRef = this.chatThreadRef.current;
      trả về chatThreadRef.scrollHeight - chatThreadRef.scrollTop;
    }
    trả về null;
  }

  componentDidUpdate (PreProps, PreState, snapshot) {
    if (ảnh chụp nhanh! == null) {
      const chatThreadRef = this.chatThreadRef.current;
      chatThreadRef.scrollTop = chatThreadRef.scrollHeight - ảnh chụp nhanh;
    }
  } 

Đây là cửa sổ trò chuyện:

Tuy nhiên, hình ảnh bên dưới làm nổi bật vùng thực tế chứa các tin nhắn trò chuyện (danh sách không có thứ tự, ul nơi chứa các tin nhắn):

Đây là ul chúng tôi có tham chiếu đến việc sử dụng React Ref.

 & lt; ul className = "chat-thread" ref = {this.chatThreadRef} & gt;
   ...
& lt; / ul & gt; 

Trước hết, vì getSnapshotBeforeUpdate có thể được kích hoạt để cập nhật thông qua bất kỳ số lượng đạo cụ nào hoặc thậm chí là cập nhật trạng thái , chúng tôi viết mã trong một điều kiện để kiểm tra xem có thực sự có tin nhắn trò chuyện mới hay không:

 getSnapshotBeforeUpdate (prevProps, prevState) {
    if (this.state.chatList & gt; prevState.chatList) {
      // viết logic ở đây
    }
    
  } 

getSnapshotBeforeUpdate phải trả về một giá trị. Nếu không có tin nhắn trò chuyện nào được thêm vào, chúng tôi sẽ chỉ trả về null :

 getSnapshotBeforeUpdate (prevProps, prevState) {
    if (this.state.chatList & gt; prevState.chatList) {
      // viết logic ở đây
    }
     return null 
} 

Bây giờ hãy xem xét mã đầy đủ cho phương thức getSnapshotBeforeUpdate :

 getSnapshotBeforeUpdate (prevProps, prevState) {
    if (this.state.chatList & gt; prevState.chatList) {
       const chatThreadRef = this.chatThreadRef.current;
      trả về chatThreadRef.scrollHeight - chatThreadRef.scrollTop; 
    }
    trả về null;
  } 

Trước tiên, hãy xem xét tình huống trong đó toàn bộ chiều cao của tất cả các tin nhắn trò chuyện không vượt quá chiều cao của ngăn trò chuyện:

componentDidUpdate Ví dụ

 componentDidUpdate Ví dụ

Ở đây, biểu thức chatThreadRef.scrollHeight - chatThreadRef.scrollTop sẽ tương đương với chatThreadRef. scrollHeight - 0 .

Khi điều này được đánh giá, nó sẽ bằng dấu scrollHeight của ngăn trò chuyện - ngay trước khi tin nhắn mới được chèn vào DOM.

Nếu bạn nhớ từ giải thích trước, giá trị trả về từ phương thức getSnapshotBeforeUpdate sẽ được chuyển là thứ ba đối số cho phương thức componentDidUpdate . Chúng tôi gọi đây là ảnh chụp nhanh :

 componentDidUpdate (presProps, prevState, snapshot) {
    
 } 

Giá trị được truyền vào đây - tại thời điểm này, là scrollHeight trước đó trước khi cập nhật DOM .

Trong componentDidUpdate , chúng ta có đoạn mã sau, nhưng nó làm gì?

 componentDidUpdate (presProps, prevState, snapshot) {
    if (ảnh chụp nhanh! == null) {
      const chatThreadRef = this.chatThreadRef.current;
      chatThreadRef.scrollTop = chatThreadRef.scrollHeight - ảnh chụp nhanh;
    }
  } 

Trên thực tế, chúng tôi đang cuộn ngăn theo chiều dọc theo lập trình từ trên xuống , cách một khoảng bằng chatThreadRef.scrollHeight - snapshot; .

snapshot đề cập đến scrollHeight trước khi cập nhật, biểu thức trên trả về chiều cao của tin nhắn trò chuyện mới cộng với bất kỳ chiều cao nào khác có liên quan do cập nhật. Vui lòng xem hình bên dưới:

componentDidUpdate React Lifecycle Method Ví dụ

 componentDidUpdate React Lifecycle Method Ví dụ

Khi toàn bộ chiều cao ngăn trò chuyện bị chiếm dụng bởi các tin nhắn (và đã được cuộn lên một chút), ảnh chụp nhanh Giá trị được trả về bởi phương thức getSnapshotBeforeUpdate sẽ bằng chiều cao thực của ngăn trò chuyện:

componentDidUpdate Ví dụ về phương pháp vòng đời phản ứng

 componentDidUpdate React Lifecycle Method Ví dụ

Tính toán từ componentDidUpdate sẽ đặt giá trị scrollTop thành tổng của chiều cao của các thông điệp bổ sung, đó chính là điều chúng tôi muốn.

componentDidUpdate Ví dụ về phương pháp vòng đời phản ứng

componentDidUpdate Ví dụ về phương pháp vòng đời phản ứng

Nếu bạn gặp khó khăn, tôi chắc chắn rằng việc giải thích (một lần nữa) hoặc kiểm tra mã nguồn sẽ giúp làm rõ các câu hỏi. Bạn cũng có thể sử dụng phần bình luận để hỏi tôi.

Phương pháp vòng đời hủy gắn kết

Phương thức sau được gọi trong giai đoạn ngắt kết nối thành phần:

componentWillUnmount ()

Phương thức vòng đời componentWillUnmount được gọi ngay lập tức trước khi một thành phần được ngắt kết nối và hủy. Đây là nơi lý tưởng để thực hiện mọi thao tác dọn dẹp cần thiết như xóa bộ hẹn giờ, hủy yêu cầu mạng hoặc xóa mọi đăng ký đã được tạo trong componentDidMount () như hình dưới đây:

 // ví dụ: thêm trình nghe sự kiện
componentDidMount () {
    el.addEventListener ()
}

// ví dụ: xóa trình nghe sự kiện
componentWillUnmount () {
    el.removeEventListener ()
 } 

Xử lý lỗi các phương pháp vòng đời

Khi mọi thứ trở nên tồi tệ trong mã của bạn, lỗi sẽ được ném ra. Các phương thức sau được gọi khi một thành phần con gặp lỗi (tức là một thành phần bên dưới chúng).

Hãy triển khai một thành phần đơn giản để bắt lỗi trong ứng dụng demo. Đối với điều này, chúng tôi sẽ tạo một thành phần mới có tên là ErrorBoundary .

Đây là cách triển khai cơ bản nhất:

 nhập React, {Thành phần} từ 'react';

lớp ErrorBoundary mở rộng thành phần {
  trạng thái = {};
  kết xuất () {
    trả về null;
  }
}

xuất ErrorBoundary mặc định; 

static getDerivedStateFromError ()

Bất cứ khi nào lỗi được đưa ra trong một thành phần con, phương thức này được gọi đầu tiên và lỗi được ném ra sẽ được chuyển thành một đối số.

Bất kỳ giá trị nào được trả về từ phương thức này đều được sử dụng để cập nhật trạng thái của thành phần.

Hãy cập nhật thành phần ErrorBoundary để sử dụng phương pháp vòng đời này:

 nhập React, {Thành phần} từ "react";
lớp ErrorBoundary mở rộng thành phần {
  trạng thái = {};

  static getDerivedStateFromError (lỗi) {
    console.log (`Nhật ký lỗi từ getDerivedStateFromError: $ {error}`);
    return {hasError: true};
  }

  kết xuất () {
    trả về null;
  }
}

xuất ErrorBoundary mặc định; 

Ngay bây giờ, bất cứ khi nào có lỗi xảy ra trong một thành phần con, lỗi sẽ được ghi vào bảng điều khiển, bảng điều khiển . error (error) và một đối tượng được trả về từ phương thức getDerivedStateFromError . Điều này sẽ được sử dụng để cập nhật trạng thái của thành phần ErrorBoundary , tức là với hasError: true .

componentDidCatch ()

Phương thức componentDidCatch cũng được gọi sau khi lỗi trong một thành phần con được ném ra. Ngoài error được ném ra, nó còn được truyền thêm một đối số biểu thị thêm thông tin về lỗi:

 componentDidCatch (lỗi, thông tin) {
    logToExternalService (error, info) // điều này được cho phép.
        // Nơi logToExternalService có thể thực hiện lệnh gọi API.
} 

Trong phương pháp này, bạn có thể gửi lỗi hoặc thông tin nhận được tới dịch vụ ghi nhật ký bên ngoài. Không giống như getDerivedStateFromError , componentDidCatch cho phép các tác dụng phụ:

 componentDidCatch (lỗi, thông tin) {
    logToExternalService (error, info) // điều này được cho phép.
        // Nơi logToExternalService có thể thực hiện lệnh gọi API.
} 

Hãy cập nhật thành phần ErrorBoundary để sử dụng phương pháp vòng đời này:

 nhập React, {Thành phần} từ "react";
lớp ErrorBoundary mở rộng thành phần {
  state = {hasError: false};

  static getDerivedStateFromError (lỗi) {
    console.log (`Nhật ký lỗi từ getDerivedStateFromError: $ {error}`);
    return {hasError: true};
  }

  componentDidCatch (lỗi, thông tin) {
    console.log (`Nhật ký lỗi từ componentDidCatch: $ {error}`);
    console.log (thông tin);
  }

  kết xuất () {
    trả về null
  }
}

xuất ErrorBoundary mặc định; 

Ngoài ra, vì ErrorBoundary chỉ có thể bắt lỗi từ các thành phần con, chúng tôi sẽ có kết xuất thành phần bất kỳ thứ gì được chuyển dưới dạng Children hoặc hiển thị giao diện người dùng lỗi mặc định nếu có sự cố:

 ...

kết xuất () {
    if (this.state.hasError) {
      return & lt; h1 & gt; Đã xảy ra lỗi. & lt; / h1 & gt ;;
    }

    trả về this.props.children;
} 

Tôi đã mô phỏng một lỗi JavaScript bất cứ khi nào bạn thêm một tin nhắn trò chuyện thứ năm. Hãy xem ranh giới sai sót tại nơi làm việc:

Kết luận

Đây là một bài diễn văn dài về chủ đề các phương thức vòng đời trong React, bao gồm cả những bổ sung mới với React 17. Tôi hy vọng hướng dẫn này và các ví dụ thực tế mà chúng tôi đã xem qua đã giúp bạn hiểu rõ hơn về các phương thức vòng đời React là gì và cách chúng hoạt động.

Gặp bạn sau!

Khả năng hiển thị đầy đủ các ứng dụng React sản xuất

Có thể khó gỡ lỗi các ứng dụng React , đặc biệt là khi người dùng gặp các sự cố khó tái tạo. Nếu bạn quan tâm đến việc theo dõi và theo dõi trạng thái Redux, tự động hiển thị lỗi JavaScript và theo dõi các yêu cầu mạng chậm và thời gian tải thành phần,

Gỡ lỗi các ứng dụng React có thể khó khăn, đặc biệt khi người dùng gặp phải các sự cố khó tái tạo. Nếu bạn quan tâm đến việc theo dõi và theo dõi trạng thái Redux, tự động hiển thị lỗi JavaScript và theo dõi các yêu cầu mạng chậm và thời gian tải thành phần, hãy thử LogRocket

LogRocket giống như một DVR cho ứng dụng web và thiết bị di động, ghi lại mọi thứ diễn ra trên ứng dụng React của bạn theo đúng nghĩa đen. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về trạng thái ứng dụng của bạn đang ở trạng thái nào khi sự cố xảy ra. LogRocket cũng theo dõi hiệu suất ứng dụng của bạn, báo cáo với các chỉ số như tải CPU máy khách, mức sử dụng bộ nhớ máy khách, v.v.

Gói phần mềm trung gian LogRocket Redux bổ sung thêm một lớp khả năng hiển thị vào các phiên người dùng của bạn. LogRocket ghi lại tất cả các hành động và trạng thái từ các cửa hàng Redux của bạn.

Hiện đại hóa cách bạn gỡ lỗi ứng dụng React của mình - .

Chia sẻ cái này:

< p class = "clearfix">


Xem thêm những thông tin liên quan đến chủ đề các phương pháp vòng đời trong phản ứng

Vòng đời kiểm thử phần mềm

alt

  • Tác giả: Le Academy
  • Ngày đăng: 2022-03-16
  • Đánh giá: 4 ⭐ ( 3466 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

Sdlc là gì? Các giai đoạn và phương pháp trong vòng đời phát triển phần mềm

  • Tác giả: bizflycloud.vn
  • Đánh giá: 4 ⭐ ( 3455 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: SDLC (Software Development Life Cycle) hay vòng đời phát triển phần mềm là một quá trình phát triển phần mềm trong một tổ chức phần mềm với chất lượng cao và chi phí thấp trong một khoảng thời gian ngắn.

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

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 9984 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.…

CÁC PHẢN ỨNG ĐÓNG VÒNG TRONG TỔNG hợp hữu cơ

  • Tác giả: text.123docz.net
  • Đánh giá: 3 ⭐ ( 6120 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ... sản phẩm phản ứng sau: a/ Phản ứng Pomeranz-Fritsch : b/ Phản ứng Pictet-Spengler: c/ Phản ứng Fischer tổng hợp indol: d/ Phản ứng Paal-Knorr tổng hợp Furan : e/ Phản ứng Paal-Knorr tổng hợp Pirol:... vòng giảm nguyên tử cacbon VD1: Phản ứng Ruzica VD2:

Đặc tính, phương pháp định tính enzyme amylase

  • Tác giả: hoathucpham.saodo.edu.vn
  • Đánh giá: 4 ⭐ ( 7896 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đặc tính, phương pháp định tính enzyme amylase - Detail - Tin Tức -...

Phân tích Vòng đời (LCA) - Phương pháp tính Tác động Carbon

  • Tác giả: www.logitech.com
  • Đánh giá: 5 ⭐ ( 2564 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu thêm về cách chúng tôi đo lường và phân tích các giai đoạn vòng đời của sản phẩm và đánh giá tác động carbon của mỗi giai đoạn – từ bắt đầu cho đến ‘cuối vòng đời’

Vòng đời phát triển phần mềm linh hoạt và và những lợi ích của nó

  • Tác giả: itguru.vn
  • Đánh giá: 4 ⭐ ( 1215 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vòng đời phát triển phần mềm linh hoạt (Agile Software Development Lifecycle) và những ích lợi của nó trong quản lý dự án 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