+1
Gọi API fetch data trong ComponentWillMount hay ComponentDidMount ?
Thực sự dù đã tìm kiếm nhiều tài liệu trên mạng để đọc qua về vấn đề này:
- https://stackoverflow.com/questions/46043832/why-componentwillmount-should-not-be-used
- https://stackoverflow.com/questions/41612200/in-react-js-should-i-make-my-initial-network-request-in-componentwillmount-or-co/41612993#41612993
- vv...
đa số các câu trả lời đều khuyên nên đặt trong "ComponentDidMount " . Nhưng cho đến giờ mình vẫn chưa clear được vì sao lại vậy nên mình muốn mọi người giúp đỡ mình thêm về câu hỏi này ? Thực tế khi mình chạy thử thì thấy để trong lifecycle nào nó cũng cho ra kết quả hết . Nhưng tại sao phải là "ComponentDidMount" ?
Thêm một bình luận
2 CÂU TRẢ LỜI
+8
Nếu là cách đây khoảng 1 năm thì bạn mới cần quan tâm đến cái này. Còn bây giờ thì không cần nữa vì phiên bản hiện tại không còn componentWillMount nữa rồi. Bạn chỉ có thể dùng componentDidMount thôi. Lý do nó bị bỏ đi là vì tính năng async rendering mới. Bạn có thể xem thêm ở bài này: https://viblo.asia/p/bJzKmMokK9N.
Cũng vì componentWillMount có vấn đề nên trước đó người ta mới khuyên dùng componentDidMount. Sau đó thì quyết định bỏ nó luôn để khỏi mất công mọi người thắc mắc.
Tất nhiên nếu bạn đang dùng phiên bản cũ (có vẻ thế) thì bạn có thể dùng cái nào cũng được, không có gì khác nhau cả. Nhưng mà tốt nhất là dùng componentDidMount để lỡ sau này update lên bản mới thì khỏi mất công sửa lại.
(dinhcaotritue)
Cám ơn bạn nhiều , vậy là cũng không có quá nhiều khác biệt giữa 2 thằng này
Bình luận này đã bị xóa
+1
Theo mình hiểu thì thứ tự thực hiện các hàm như sau:
ComponentWillMount() -> render() -> ComponentDidMount()
Nên có một số điểm khác khi dùng hai hàm đó. Ví dụ như khi bạn setState trong ComponentWillMount thì hàm render sẽ không được gọi. Hoặc khi bạn viết thật nhiều xử lí trong ComponentWillMount thì sẽ thấy thời gian chờ render sẽ lâu hơn.
ComponentWillMount không được thiết kế tốt để phục vụ cho async rendering nên sẽ bị bỏ từ V17, nên tốt nhất là bạn nên dùng ComponentDidMount.
Tham khảo: https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/introduction.html https://medium.com/@krissanawat/how-to-use-react-lifecycle-methods-d060a4c44d12
cho mình hỏi tại sao bạn nói là khi setState trong componentWillMount() thì hàm render sẽ không được gọi vì sao lại vậy bạn ? Tks bạn nhiều
Theo mình hiểu thì componentWillMount được thực hiện trước khi hàm render() đầu tiên chạy, cho nên tại thời điểm đó chưa có DOM để mà render lại.
Nếu như mình setState ở đây thì nó sẽ là giá trị khởi tạo để render lần đầu tiên. 
@cuongceopro mình tưởng componentWillMount() chạy trước khi hàm render() đầu tiên chạy, nếu thực hiện fetch() data rồi set lại State ở trong này thì vì đó là hành động bất đồng bộ nên trong khi chờ fetch() data nó sẽ chạy vào hàm render() trước . Lúc này chưa có data nên ta để màn hình ở trạng thái loading.
Sau đó khi fetch xong data thì State() lúc đó được gán lại => khi State thay đổi, React lại chạy lại hàm render() và render() với dữ liệu vừa được tải về.
Mình thấy đâu có gì sai đâu ?
