Tại sao componentdidmount chạy sau hàm render
Khi học và tìm hiểu về React Component, có lẽ bạn đã đôi lần nhìn thấy các phương thức như componentDidMount(), componentDidUpdate(), componentWillUnmount(),... Chúng được gọi là các "React lifecycle methods" - các phương thức trong vòng đời của React Component. Chúng cho phép bạn override để thực hiện một số nhiệm vụ nhất định. Do đó, việc hiểu và biết cách sử dụng các phương thức này là vô cùng quan trọng. Vì vậy, bài viết này mình sẽ đi vào tìm hiểu về React
Component Lifecycle. Hay nói ngắn gọn hơn là "React Lifecycle".
Show Mục đích của bài viết:
Các phương thức trong React Component LifecycleCác phương thức trong React Component Lifecycle có thể chia ra làm 3 pha chính là: Mounting, Updating và Unmounting. Các phương thức trong pha MountingMounting là giai đoạn khi React Component được tạo ra và render lên trên DOM tree. Các React lifecycle methods được gọi trong giai đoạn này lần lượt là:
Trong đó, phương thức render() BẮT BUỘC phải có; phương thức getDerivedStateFromProps() ít khi sử dụng; phương thức constructor() và componentDidMount() thường xuyên được sử dụng - nhưng không bắt buộc. Vì vậy, dưới đây mình sẽ chỉ trình bày về các React lifecycle methods quan trọng và hay sử dụng. Phương thức constructor()Đối với class nói chung, constructor() luôn là phương thức được gọi đến ĐẦU TIÊN mỗi khi khởi tạo. Tuy nhiên, bạn chỉ nên sử dụng phương thức này với 2 mục đích:
Ngược lại thì bạn có thể bỏ qua phương thức này, ví dụ:
Trong đó:
Phương thức render()Đây là phương thức duy nhất bắt buộc phải có đối với React Component và có cấu trúc như sau:
Phương thức này dùng để miêu tả cấu trúc của Component sau khi nó được chèn vào DOM tree. Nó bắt buộc được gọi lần đầu tiên để chèn Component vào HTML, và có thể được gọi lại để cập nhật giao diện mỗi khi state của Component thay đổi. Đặc biệt, bạn nên để phương thức này là Pure Function - nghĩa là nó không làm thay đổi state của Component, không tương tác với trình duyệt, không lấy dữ liệu từ server,... Chỉ đơn giản là nó lấy data từ this.props và this.state để xây dựng và cập nhật giao diện. Phương thức componentDidMount()Phương thức componentDidMount() được gọi một lần duy nhất ngay sau khi Component được render xong. Và nếu để so sánh với JavaScript thuần thì mình thấy phương thức này khá giống với việc bạn đăng ký sự kiện DOMContentLoaded. Chính vì tính chỉ được gọi một lần duy nhất nên bên trong phương thức này, mình có thể:
Hết phương thức này, nghĩa là mình đã xử lý xong trong pha Mounting. Có 3 phương thức quan trọng mà bạn cần nhớ là:
Tiếp theo, mình sẽ xử lý việc cập nhật giao diện trong pha Updating.
Sơ đồ đầy đủ các phương thức của React Component Lifecycle (sưu tầm) Các phương thức trong pha UpdatingUpdating là giai đoạn khi React Component cần cập nhật giao diện mỗi khi props hoặc state của nó thay đổi. Các React lifecycle methods được gọi trong giai đoạn này lần lượt là:
Trong đó, phương thức render() là bắt buộc và đã được trình bày ở phần trước; phương thức getDerivedStateFromProps(), shouldComponentUpdate() và getSnapshotBeforeUpdate() ít khi được sử dụng; phương thức componentDidUpdate() thường xuyên được sử dụng nên mình sẽ trình bày ở phía dưới. Phương thức render() vả shouldComponentUpdate()Như mình đã nói ở trên, phương thức render() trong pha Updating có thể được gọi hoặc không, phụ thuộc vào phương thức shouldComponentUpdate(). Mặc định, phương thức shouldComponentUpdate() sẽ trả về true. Nghĩa là mỗi khi bạn gọi phương thức this.setState để cập nhật state của Component thì render() sẽ được gọi lại để cập nhật giao diện. Tuy nhiên, sẽ có trường hợp dù bạn gọi lại this.setState, nhưng giá trị của state vẫn không thay đổi. Khi đó, việc gọi lại hàm render() là vô nghĩa. Trong ví dụ phía trên, giả sử bạn chủ động gọi hàm this.setState để cập nhật giá trị của biến count, nhưng giá trị mới vẫn là 0 - bằng giá trị ban đầu.
Lúc này, phương thức render() mặc định sẽ bị gọi lại, nhưng như vậy chẳng phải là vô nghĩa hay sao? Tuy nhiên, nếu bạn định nghĩa thêm phương thức shouldComponentUpdate() như này:
thì phương thức render() sẽ không bị gọi lại nữa. Bởi vì, nextState.count và this.state.count lúc này đều bằng 0, nên Tuy nhiên, nếu không quá quan trọng về hiệu năng thì bạn có thể bỏ qua phương thức shouldComponentUpdate(). Phương thức componentDidUpdate()Phương thức này được gọi sau khi việc update kết thúc - component với những dữ liệu mới đã được cập nhật xong lên giao diện. Trong phương thức này, bạn có thể xử lý việc lấy dữ liệu từ server, ví dụ:
Tức là nếu giá trị của props userID thay đổi thì bạn sẽ lấy dữ liệu từ server xuống và làm một số thứ sau đó. Ở đây, bạn cần chú ý điều kiện trong if. Nếu không có điều kiện này thì việc this.fetchData từ server xuống vẫn được thực hiện dù cho giá trị userID không thay đổi. Ngoài ra, bạn cũng có thể xử lý DOM node trong phương thức này, ví dụ như: ẩn hiện 1 phần tử, thay đổi width/height của nó để phù hợp với dữ liệu mới,... Hoặc thậm chí bạn cũng có thể thay đổi state của Component tại đây. Nhưng phải cẩn thận với điều này vì: khi bạn gọi this.setState thì componentDidUpdate() lại được gọi. Nếu bạn không xử lý điều kiện if else hợp lý thì rất có thể vòng lặp vô hạn sẽ xảy ra. Tóm lại trong pha Updating này có 3 phương thức bạn cần chú ý là:
Phương thức trong pha Unmouting - componentWillUnmount()Unmounting là giai đoạn khi React Component bị xoá khỏi DOM tree. Trong giai đoạn này, chỉ có một phương thức được gọi duy nhất là: componentWillUnmount(). Phương thức này tương ứng với phương thức componentDidMount() trong giai đoạn Mounting. Nghĩa là phương thức này cũng chỉ được gọi 1 lần duy nhất. Và quan trọng là những thứ bạn khởi tạo, đăng ký ở componentDidMount() thì bạn phải xoá, huỷ đăng ký trong phương thức componentWillUnmount(). Giả sử mình khởi tạo Interval và đăng ký sự kiện resize bên trong componentDidMount():
Thì sau đó, mình phải xoá interval và huỷ đăng ký sự kiện resize trong componentWillUnmount():
Ví dụ minh hoạXem Demo React Component Lifecycle Giả sử mình xây dựng Counter Component như sau. Code demo về React Component Lifecycle
Kết quảNếu bạn chạy ví dụ Demo và mở console trên DevTool lên (sử dụng phím tắt Ctrl + Shift + I hoặc F12), thì sẽ thấy kết quả hiển thị như sau:
Trong đó, pha Mounting ứng với 3 dòng đầu tiên. Suy ra, thứ tự các React lifecycle methods là:
Tiếp theo, pha Updating:
Cuối cùng, pha Unmounting:
Lời kếtTrên đây là một số kiến thức cơ bản mà mình đã tìm hiểu về React Component Lifecycle. Trước khi kết thúc bài viết, mình xin nhắc lại các React Lifecycle Methods quan trọng mà bạn cần quan tâm là:
Nếu có phần nào khó hiểu, bạn có thể để lại bình luận xuống phía dưới nhé! Mình sẽ cố gắng giải đáp. Xin chào và hẹn gặp lại, thân ái! Tham khảo:
★ Nếu bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé: |