Yêu cầu thg 1 30, 2019 2:40 CH 2462 1 2
  • 2462 1 2
+1

Gọi API fetch data trong ComponentWillMount hay ComponentDidMount ?

Chia sẻ
  • 2462 1 2

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:

đ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" ?

2 CÂU TRẢ LỜI


Đã trả lời thg 1 30, 2019 7:26 CH
Đã được chấp nhận
+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.

Chia sẻ
thg 1 31, 2019 3:52 SA

(dinhcaotritue)

Avatar Anh Tran @thanh_tuan
thg 1 31, 2019 1:29 CH

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

Avatar Mai Cuong @cuongceopro
thg 2 1, 2019 11:42 SA
Đã trả lời thg 2 1, 2019 11:43 SA
+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

Chia sẻ
Avatar Anh Tran @thanh_tuan
thg 2 1, 2019 10:30 CH

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

Avatar Mai Cuong @cuongceopro
thg 2 2, 2019 5:19 SA

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

Avatar Anh Tran @thanh_tuan
thg 2 3, 2019 10:26 CH

@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 ?

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí