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

L UẬT CỦA STATE

❑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 đổigiữa các lần render ( có nghĩa là khi state object thay đổi, component sẽ re-render )

L UẬT CỦA STATE

S TATE OBJECT

Chỉ có thể sử dụng trong class component

Cài đặt khi component được tạo

T HAY ĐỔI STATE OBJECT

❑Để thay đổi 1 giá trị trong state object, sử dụng

this.setState()

❑Khi 1 giá trị trong state object thay đổi,

component sẽ re-render (xuất lại, vẽ lại), nghĩa là

dữ liệu ra (output) sẽ thay đổi theo giá trị mới

T HAY ĐỔI STATE OBJECT

Thay đổi giá trị trong

state với setState()

Có thể đặt giá trị mặc định bên trong

component

Có thể đặt giá trị ban đầu cho các

component con

Có thể thay đổi trong các component con ✓ ✗

STATE - APP WEATHER

STATE – APP WEATHER

❖Nam bán cầu – mùa

S TATE – A PP WEATHER

❑Cấu trúc project

A PP WEATHER – S EASON D ISPLAY JS

A PP WEATHER – INDEX JS

❑Location (thay đổi)

Khởi tạo

Cập nhật

Đ IỀU KIỆN RENDER NỘI DUNG

RENDER NỘI DUNG

CHUYỂN STATE NHƯ PROPS

C HUYỂN STATE NHƯ PROPS

C HUYỂN STATE NHƯ PROPS

L IFECYCLE

❑Mỗi 1 component trong react có 1 vòng đời

(lifecycle) phát triển của riêng nó

❑Lifecycle mỗi component có 3 giai đoạn:

mounting, updating, unmounting

L IFECYCLE

Kết xuất JSX Cập nhật component

+ Re-render

Xoá component

L IFECYCLE - MOUNTING

❑Contructor(): được tạo trước hết

❖ Khởi tạo component

❖ Cài đặt state và các giá trị ban đầu.

❖ Gọi props (như là đối số)

❖ Sử dụng super(props) trước tất cả các khởi tạo

khác để

➢ Khởi tạo constructor cha

➢ Cho phép các component kế thừa các phương thức từ cha của nó

❑Render(): bắt buộc luôn được gọi (call)

❖ Hiển thị JSX thành DOM

L IFECYCLE - MOUNTING

L IFECYCLE - MOUNTING

❑componentDidMount()

❖ Được gọi 1 lần trong lifecycle

❖ Được gọi sau khi component được kết xuất (rendered)

❑Ví dụ

❖ Được gọi khi component được cập nhật

❖ Kết xuất lại những thay đổi mới

❑componentDidUpdate()

❖ Được gọi sau khi component được cập nhật

Render: The updated favourite is yellow

L IFECYCLE - UNMOUNTING

❑Unmounting:

❖ Component được xoá khỏi DOM

❖ Kết thúc lifecycle của component

❖ componentWillUnmount()

L IFECYCLE

L IFECYCLE

L IFECYCLE

LIFECYCLE – APP WEATHER

L IFECYCLE