React Component's lifecycle (Functional Concept)

Question 1

Một Lifecycle của Component có bao nhiêu thành phần chính (main phase)?

Answer 1

Có 3 thành phần chính (main phase): Mounting, Updating, và Unmounting. (Có nhiều phases khác nữa)

Question 2

Hàm constructor() của Mounting Phase (trong Component’s lifecycle) được call khi nào?

Answer 2

Khi Component đó được tạo lần đầu tiên.

Question 3

Có bao nhiêu main lifecycle methods của Mounting Phase trong Component’s Lifecycle? Chúng là gì?

Answer 3

3 main lifecycle methods của Mounting Phase:
1. constructor() lifecycle method
2. render() lifecycle method
3. getDerivedStateFromProps() lifecycle method

Question 4

Trong Lifecycle của Component, mỗi thành phần chính (main phase) có gì?

Answer 4

Mỗi main phase có một tập các Lifecycle Methods cụ thể và được gọi vào các thời điểm khác nhau trong Component’s lifecycle.

Question 5

Khi dùng constructor() trong Mounting Phase ta có thể làm những gì?

Answer 5

Ta dùng constructor() để khởi tạo component’s state và bind methods vào cái instance của component.

Question 6

Hàm render() trong Mounting Phase làm gì?

Answer 6

Hàm render() có trách nhiệm generating cái Component’s virtual DOM dựa trên các props và state hiện tại.

Question 7

Hàm render() trong Mounting Phase được gọi khi nào?

Answer 7

Có 3 trường hợp hàm render() được gọi:
1. Mỗi lần khi cái Component đấy cần re-rendered.
2. Những props hay state của Component đấy thay đổi.
3. Do Parent Component dduwoj re-rendered.

Question 8

Hàm getDerivedStateFromProps() được gọi khi nào?

Answer 8

Nó được gọi trong cả hai giai đoạn: Mounting và Updating.

Trong Mounting phase, getDerivedStateFromProps() được gọi sau constructor() và trước render().

Hàm getDerivedStateFromProps() được gọi trong mỗi chu kỳ render và nó cho ta cơ hội update component’s state dựa trên các thay đổi của props trước lần render ban đầu.

Question 9

Cấu trúc của hàm getDerivedStateFromProps()

Answer 9

static getDerivedStateFromProps(props, state)

Nó có 2 tham số:
props: Là các updated props cho component
state: Là current state của component

Nó return một object đại diện cho cái update state của component. Hoặc là return về null nếu không update state.

Question 10

Hàm getDerivedStateFromProps() là hàm tĩnh hay đông?

Answer 10

getDerivedStateFromProps() là một hàm tĩnh. Thế nên nó không thể tương tác với Component’s instance methods or properties (bởi thì không thể dùng từ khóa this).