- vừa được xem lúc

Vòng đời của một React Component

0 0 30

Người đăng: luvasa

Theo Viblo Asia

constructor(props)

  • Được gọi khi một thể hiện của component được tạo ra.
  • Có thể dùng để khởi tạo state cho component.
  • Cũng có thể dùng để "bind" các hàm của component.
  • Nếu phải cài đặt hàm này thì phải khai báo 1 tham số props cho nó và phải gọi super(props) đầu tiên.
  • Nếu không làm gì thì không phải cài đặt hàm này.

componentWillMount()

  • Được gọi trước khi render().
  • Dùng để đăng ký các sự kiện toàn cục.
  • Dựa vào các props để tính toán và set lại state

render()

  • Hàm này bắt buộc phải có trong component().
  • Trả về 1 đối tượng JSX (có thể lồng các đối tượng với nhau nhưng phải có 1 đối tượng gói tất cả các đối tượng lại) để hiển thị hoặc null / false nếu không muốn hiển thị gì.
  • Không được gọi setState() trong hàm này (cũng như trong các hàm mà hàm này gọi đến), bởi khi gọi setState() thì hàm render sẽ được gọi => gây ra lặp vô hạn.

componentDidMount()

  • Ngay sau khi hàm render được gọi đến lần đầu tiên chạy xong thì hàm này sẽ được chạy.
  • Thường dùng để fetch dữ liệu từ server và sau đó setState để render dữ liệu ra.
  • Đến đây thì các phần tử đã được sinh ra rồi, và có thể tương tác với DOM bằng JS trong hàm này.

componentWillReceiveProps(nextProps)

  • Hàm này được chạy khi mà props của component đã được sinh ra có sự thay đổi.
  • Phải gọi setState() nếu muốn render lại.

shouldComponentUpdate(nextProps, nextState)

  • Được gọi trước render.
  • Trả về true / false. Nếu false thì sẽ không render lại. Mặc định là true.

componentWillUpdate(nextProps, nextState)

  • Được gọi ngay sau shouldComponentUpdate() nếu hàm này trả về true.
  • Không gọi setState() trong hàm này bởi hàm này là để chuẩn bị update cho đối tượng chứ không phải tạo ra 1 update mới, sẽ tạo ra lặp vô hạn.
  • Hàm render sẽ được gọi ngay sau hàm này.

componentDidUpdate(prevProps, prevState)

  • Được gọi ngay sau render() từ lần render thứ 2 trở đi.
  • Đây cũng là 1 cơ hội để thao tác với các phần tử DOM bằng JS.

componentWillUnmount()

  • Được gọi khi 1 component được loại bỏ khỏi DOM.
  • Thực hiện các thao tác dọn dẹp như huỷ các timer, loại bỏ các phần tử thừa, ...

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 525

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 396

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 738

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 358

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 449

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 433