Sự khác biệt giữa componentWillMount và componentDidMount trong ReactJS là gì?

Tôi đã xem tài liệu của Facebook tại ( React.Component ) và nó đề cập đến cách componentWillMountđược gọi trên máy khách / máy chủ trong khi componentDidMountchỉ được gọi trên máy khách. Làm gì componentWillMountvới máy chủ?

componentWillMount về cơ bản là hàm tạo. Bạn có thể đặt các thuộc tính phiên bản không ảnh hưởng đến kết xuất, kéo dữ liệu từ một cửa hàng một cách đồng bộ và setState với nó, và mã miễn phí tác dụng phụ đơn giản khác mà bạn cần chạy khi thiết lập thành phần của mình.

Nó hiếm khi cần thiết và hoàn toàn không phải với các lớp ES6.

các constructorphương pháp không phải là giống như componentWillMount.

Theo tác giả của Redux, việc gửi các hành động từ hàm tạo là rất rủi ro vì nó có thể dẫn đến thay đổi trạng thái trong khi kết xuất.

Tuy nhiên, cử từ componentWillMountlà tốt.

từ vấn đề github :

Điều này xảy ra khi send () bên trong phương thức khởi tạo của một thành phần gây ra một setState () bên trong một thành phần khác. React theo dõi “chủ sở hữu hiện tại” cho những cảnh báo như vậy — và nó cho rằng chúng ta đang gọi setState () bên trong hàm tạo khi hàm tạo về mặt kỹ thuật gây ra một setState () bên trong một số phần khác của ứng dụng. Tôi không nghĩ chúng ta nên xử lý việc này — đó chỉ là React đang cố gắng làm tốt nhất công việc của mình. Giải pháp là, như bạn đã lưu ý một cách chính xác, thay vào đó, chuyển () bên trong componentWillMount ().

Để thêm vào những gì FakeRainBrigand đã nói, componentWillMountđược gọi khi hiển thị React trên máy chủ và trên máy khách, nhưng componentDidMountchỉ được gọi trên máy khách.

componentWillMountđược thực hiện trước BAN ĐẦU rendercủa một thành phần và được sử dụng để đánh giá các đạo cụ và thực hiện bất kỳ logic bổ sung nào dựa trên chúng (thường cũng để cập nhật trạng thái) và như vậy có thể được thực hiện trên máy chủ để có được đánh dấu phía máy chủ đầu tiên được hiển thị .

componentDidMountđược thực hiện SAU lần đầu tiên renderkhi DOM đã được cập nhật (nhưng quan trọng là TRƯỚC KHI cập nhật DOM này được vẽ vào trình duyệt, cho phép bạn thực hiện tất cả các loại tương tác nâng cao với chính DOM). Tất nhiên, điều này chỉ có thể xảy ra trong chính trình duyệt và do đó không xảy ra như một phần của SSR, vì máy chủ chỉ có thể tạo đánh dấu chứ không phải chính DOM, điều này được thực hiện sau khi nó được gửi đến trình duyệt nếu sử dụng SSR

Tương tác nâng cao với DOM mà bạn nói? Whaaaat ?? ... Đúng vậy - tại thời điểm này vì DOM đã được cập nhật (nhưng người dùng chưa thấy bản cập nhật trong trình duyệt) nên có thể chặn bức tranh thực tế trên màn hình bằng cách sử dụng window.requestAnimationFramevà sau đó làm những việc như đo lường thực tế Các phần tử DOM sẽ được xuất ra, mà bạn có thể thực hiện các thay đổi trạng thái khác, cực kỳ hữu ích, chẳng hạn như tạo hoạt ảnh tới chiều cao của một phần tử có nội dung có độ dài thay đổi không xác định (vì bây giờ bạn có thể đo lường nội dung và gán chiều cao cho hoạt ảnh), hoặc để tránh các kịch bản nội dung nhấp nháy trong quá trình thay đổi trạng thái.

Hãy rất cẩn thận mặc dù để thay đổi trạng thái cảnh giác trong bất kỳ componentDid...khi có thể gây ra một vòng lặp vô hạn vì một sự thay đổi trạng thái cũng sẽ gây ra một tái render, và do đó khác componentDid...và cứ tiếp tục và trên

Theo tài liệu ( https://facebook.github.io/react/docs/react-component.html )

Các phương thức có tiền tố là will được gọi ngay trước khi điều gì đó xảy ra và

Các phương thức có tiền tố did được gọi là r ight sau khi điều gì đó xảy ra.

componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

Tuy nhiên, có một “gotcha”: Một lệnh gọi không đồng bộ để tìm nạp dữ liệu sẽ không trả về trước khi kết xuất xảy ra. Điều này có nghĩa là thành phần sẽ hiển thị với dữ liệu trống ít nhất một lần.

Không có cách nào để "tạm dừng" hiển thị để chờ dữ liệu đến. Bạn không thể trả lại lời hứa từ componentWillMount hoặc wrangle trong setTimeout bằng cách nào đó.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

Thành phần của chúng tôi sẽ không có quyền truy cập vào Giao diện người dùng gốc (DOM, v.v.). Chúng tôi cũng sẽ không có quyền truy cập vào các refs con vì chúng chưa được tạo. ComponentWillMount () là cơ hội để chúng tôi xử lý cấu hình, cập nhật trạng thái của chúng tôi và nói chung là chuẩn bị cho lần hiển thị đầu tiên. Điều này có nghĩa là chúng ta có thể bắt đầu thực hiện các phép tính hoặc quy trình dựa trên các giá trị prop.

Ca sử dụng cho componentWillMount ()

Ví dụ: nếu bạn muốn giữ ngày thành phần được tạo ở trạng thái thành phần của mình, bạn có thể thiết lập điều này trong phương pháp này. Xin lưu ý rằng thiết lập trạng thái trong phương pháp này sẽ không hiển thị lại DOM. Điều quan trọng cần ghi nhớ là vì trong hầu hết các trường hợp, bất cứ khi nào chúng ta thay đổi trạng thái của thành phần, kết xuất lại được kích hoạt.

componentWillMount() {
  this.setState({ todayDate: new Date(Date.now())});
}

Ca sử dụng cho componentDidMount ()

Ví dụ: nếu bạn đang xây dựng một ứng dụng tin tức tìm nạp dữ liệu về tin tức hiện tại và hiển thị cho người dùng và bạn có thể muốn dữ liệu này được cập nhật mỗi giờ mà người dùng không cần phải làm mới trang.

componentDidMount() {
  this.interval = setInterval(this.fetchNews, 3600000);
}

ComponentDidMount()Phương thức chỉ thay đổi trang hiện tại trong các thành phần lớp nhưng ComponentWillMount()thay đổi tất cả các trang bị ảnh hưởng bởisetStates()