Tài liệu lập trình front reactjs SLIDE 3

❑State là 1 đối tượng javascript (javascript object) dùng lưu trữ dữ liệu động của component và cho phép component theo dõi những thay đổi giữa các lần render ( có nghĩa là khi state object thay đổi, component sẽ rerender )

Conceive Design Implement Operate THỰC HỌC – THỰC NGHIỆP http://www.poly.edu.vn MỤC TIÊU Component: state Component’s Lifecycle LUẬT CỦA STATE ❑State đối tượng javascript (javascript object) dùng lưu trữ liệu động component cho phép component theo dõi thay đổi lần render ( có nghĩa state object thay đổi, component re-render ) LUẬT CỦA STATE STATE OBJECT Chỉ sử dụng class component Cài đặt component tạo THAY ĐỔI STATE OBJECT ❑Để thay đổi giá trị state object, sử dụng this.setState() ❑Khi giá trị state object thay đổi, component re-render (xuất lại, vẽ lại), nghĩa liệu (output) thay đổi theo giá trị THAY ĐỔI STATE OBJECT Thay đổi giá trị state với setState() SO SÁNH PROPS VÀ STATE Props State Có thể nhận giá trị ban đầu từ component cha Có thể thay đổi component cha ✓ ✓ ✓ ✗ Có thể đặt giá trị mặc định bên component Có thể thay đổi bên component ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✗ Có thể đặt giá trị ban đầu cho component Có thể thay đổi component STATE - APP WEATHER LIFECYCLE ❑Mỗi component react có vịng đời (lifecycle) phát triển riêng ❑Lifecycle component có giai đoạn: mounting, updating, unmounting LIFECYCLE Kết xuất JSX Cập nhật component + Re-render Xoá component LIFECYCLE - MOUNTING ❑Mounting: kết xuất JSX thành DOM ❖constructor() ❖render() ❖componentDidMount() LIFECYCLE - MOUNTING ❑Contructor(): tạo trước hết ❖Khởi tạo component ❖Cài đặt state giá trị ban đầu ❖Gọi props (như đối số) ❖Sử dụng super(props) trước tất khởi tạo khác để ➢ Khởi tạo constructor cha ➢ Cho phép component kế thừa phương thức từ cha ❑Render(): bắt buộc gọi (call) ❖Hiển thị JSX thành DOM LIFECYCLE - MOUNTING LIFECYCLE - MOUNTING ❑componentDidMount() ❖Được gọi lần lifecycle ❖Được gọi sau component kết xuất (rendered) ❑Ví dụ LIFECYCLE - UPDATING ❑Updating: component cập nhật ❖render() ❖componentDidUpdate() ❑Render(): ❖Được gọi component cập nhật ❖Kết xuất lại thay đổi ❑componentDidUpdate() ❖Được gọi sau component cập nhật LIFECYCLE - UPDATING constructor Render: My Favourite Color is red componentDidAmount Render: My Favourite Color is yellow componentDidUpdate (red to yellow) Render: The updated favourite is yellow LIFECYCLE - UNMOUNTING ❑Unmounting: ❖Component xoá khỏi DOM ❖Kết thúc lifecycle component ❖componentWillUnmount() LIFECYCLE LIFECYCLE LIFECYCLE LIFECYCLE – APP WEATHER LIFECYCLE