reactjs-component-lifecircle

Ở bài viết này mình sẽ giới thiệu các bạn những callback function được gọi trong xuyên suốt chu trình khởi tạo cho đến hủy 1 component. Mình sử dụng phiên bản mới nhất ở thời điểm viết bài này là 0.13.3

Các callback function liên quan đến việc mouting 1 component, được minh họa ở code dưới này, mình đã giải thích rõ ràng trong các comment code, các bạn chỉ cần copy toàn bộ code dưới đây vào file HTML và mở console lên là có thể thưởng thức.

Code dưới đây minh họa việc Unmount 1 component, kèm theo việc destroy object javascript được khởi tạo trong quá trình mount (cụ thể ở đây là object interval). Lưu ý thêm, tại sao trong đây mình đặt tên biến là inc, biến này có nghĩa là increment, đặt như vậy cho pro ^^, vì trong MongoDb cũng có thuộc tính $inc, nhiệm vụ là tăng 1 giá trị cho biến số.

Code dưới đây minh họa việc update state có điều kiện, chỉ khi đúng điều kiện thì mới update state, render lại giao diện

Các bạn cần lưu ý 2 khái niệm dưới đây để sử dụng cho đúng mục đích.

Props: nhiệm vụ lưu các biến không cần binding lên giao diện.

State: lưu các biến có binding lên giao diện, khi thay đổi trên state thì trên giao diện thay đổi theo.

Lưu ý: mình giải thích toàn bộ code ngay trong source, đôi khi mình sử dụng các từ ngữ rất bình dân, không đúng thuật ngữ, để mọi người có thể dễ hiểu, tiếp thu nhanh chóng.

ReactJS – Component Lifecycle

Category: ProgramingReactJS
0
1375 views

Join the discussion

Your email address will not be published. Required fields are marked *

Comment moderation is enabled. Your comment may take some time to appear.