Khi nào chính xác `componentDidMount` được kích hoạt?

Question

Đây là vấn đề định kỳ mà tôi gặp phải với React. Phương pháp componentDidMount được đảm bảo sẽ được kích hoạt khi thành phần được hiển thị lần đầu tiên vì vậy nó có vẻ giống như một nơi tự nhiên để thực hiện các phép đo DOM như chiều cao và độ lệch. Tuy nhiên, nhiều lần tôi nhận được các thông số đọc sai ở thời điểm này trong vòng đời của linh kiện. Thành phần là trong DOM, khi tôi ngắt bằng trình gỡ lỗi, nhưng nó chưa được vẽ trên màn hình. Tôi nhận được vấn đề này với các yếu tố có chiều rộng/chiều cao thiết lập đến 100% chủ yếu. Khi tôi thực hiện các phép đo trong componentDidUpdate - mọi thứ đều hoạt động tốt, nhưng phương pháp này sẽ không kích hoạt khi kết xuất ban đầu của thành phần.

Vì vậy, câu hỏi của tôi là - khi chính xác là componentDidMount bị sa thải vì rõ ràng là không bị sa thải sau khi tất cả các loại trình duyệt được thực hiện.

EDIT: This Stackoverflow issue giao dịch với cùng một chủ đề:

Nó cũng tham chiếu this github conversation giải thích những gì xảy ra

Answer 1

Bên trong cây thành phần phản ứng, componentDidMount() được kích hoạt sau khi tất cả các thành phần con cũng được gắn kết. Điều này có nghĩa là bất kỳ thành phần nào của componentDidMount() đều được kích hoạt trước khi cha mẹ của nó được gắn.

Vì vậy, nếu bạn muốn đo vị trí và kích thước DOM, v.v. sử dụng componentDidMount() của thành phần con là nơi/thời gian không an toàn để thực hiện việc này.

Trong trường hợp của bạn: để có được đọc chính xác từ 100% thành phần chiều rộng/chiều cao, một nơi an toàn để lấy số đo như vậy sẽ bên trong componentDidMount() của đầu các phản ứng thành phần.
100% là chiều rộng/chiều cao so với phụ huynh/vùng chứa.Vì vậy, các phép đo chỉ có thể được thực hiện sau khi phụ huynh đã được gắn kết quá.

Answer 2

Như bạn đã biết, componentDidMount được kích hoạt chỉ một lần ngay sau khi vẽ ban đầu.

Vì bạn đang thực hiện các phép đo, có vẻ như bạn cũng muốn kích hoạt phép đo khi componentDidUpdate trong trường hợp số đo thay đổi khi thành phần của bạn cập nhật.

Xin lưu ý rằng componentDidUpdate không xảy ra cho lần hiển thị ban đầu, do đó bạn có thể cần cả hai sự kiện vòng đời để kích hoạt xử lý đo lường của bạn. Xem sự kiện thứ hai này có kích hoạt cho bạn hay không và liệu nó có các phép đo khác nhau hay không.

Theo tôi, bạn nên tránh sử dụng setTimeout hoặc requestAnimationFrame khi có thể.

React Lifecycle Reference.

Answer 3

bạn có thể thử trì hoãn logic trong componentDidMount() với requestAnimationFrame(). lôgic nên xảy ra sau lần sơn tiếp theo. Tuy nhiên,

tuy nhiên, chúng tôi cần biết thêm về mã của bạn để xem tại sao các nút chưa được sơn. Tôi chưa bao giờ gặp vấn đề đó. componentDidMount() bắn ngay sau khi các nút dom được thêm vào trang, nhưng không nhất thiết sau khi chúng đã được sơn.

Answer 4

Nếu bạn muốn trả lời nội dung nào đó được gắn trong DOM, cách đáng tin cậy nhất để thực hiện điều đó là với ref callback. Ví dụ:

render() { 
    return (
    <div 
     ref={(el) => { 
     if (el) { 
      // el is the <div> in the DOM. Do your calculations here! 
     } 
     }} 
    ></div> 
); 
}