Hiểu về Component , Props , State trong React JS
1.Component :
a) Định nghĩa :
+ Là thành phần giúp ta chia nhỏ giao diện người dùng (UI) để tăng tính tái sử dụng.
+ 2 vai trò của component là tạo ra phần HTML cho người dùng và xử lý hành động của người dùng (feed back)
+ Chú ý : chia giao diện ra càng nhỏ thì khả năng tái sử dụng càng cao.
- Có 2 cách để tạo ra component
+ Dùng function (function component)
+ Dùng class (class component)
=> Tạo ra component từ function hay class cũng giống như tạo object từ contructor function hay class bản chất không khác nhau.
=>Lúc nào thì dùng function lúc nào thì dùng class ??
+ Chúng ta xử dụng function khi component này đơn giản , ít logic , và chúng ta đã có thể xác định chính xác nội dung của component này là gì .
+ Sử dụng phù hợp cho các trường hợp còn lại :v
- Sau đây là các lý do mà mình hay sử dụng class
+ Tổ chức code dễ dàng hơn (các này thực hành mới thấy được)
+ Đọc code dễ hơn . tưởng tượng xem bạn nhảy vào đọc code mà thấy mấy chục các function và không thể phân biệt đâu là hàm chức năng đâu là function component.
+ Xử lý thông tin đầu vào của người dùng dễ dàng hơn.(cái này bạn cũng phải thực hành nhiều mới thấy được tác dụng )
- Một số quy tắc khi dùng Class Component
c)
2.Props (Properties)
+ Props giúp các component giao tiếp với nhau .
+ Props được truyền từ parent componet sang children component.
+ Props là bất biến tức là khi bạn truyền nó vào hàm thì nó không thể thay đổi được.
+ Do props không thay đổi được nên chúng ta mới cần đến state.
3.State
+ Là trạng thái của một componet.
+ Hiểu đơn giản nó là một object chứa dữ liệu của một component nhất định
+ State có thể thay đổi được.
=> Có 2 cách để khởi tạo State :
+ Định nghĩa trong contructor với cú pháp this.setState({})
+ Định nghĩa trong ở bên ngoài contructor với cú pháp state({})
- Khi bạn update state thì component chứa nó sẽ tự động được render lại.
=>Nếu chúng ta muốn một component được update thì chỉ cần update state của nó.
- Chú ý rằng state chỉ có thể update bằng cách sử dụng function setState.
- Sate phải được khai báo ngay khi component được khởi tạo.
4.Contructor
+ Là một hàm đặc biệt.
+ Đối số mặc định đầu tiên của nó là props.
+ Được gọi bất cứ khi nào một thể hiện của Class được tạo ra...Bạn nào học Java chắc không xa lạ với khái niệm này.
+ Khi tạo ra một Contructor function phải invoked hàm super (hàm super dùng để gọi contructor funticon class cha của nó), class App kế thừa từ class React.Component mà bản thân class React.Component có contructor function của riêng nó dùng để thiết lập một số tiến trình , thiết lập khi khởi tạo các Component vậy nên khi App kế thừa React.Component thì phảigọi hàm super để invoked contructor function của React.Component để đảm bảo các tiến trình và thiết lập vẫn được gọi.
+ Bất cứ khi nào một instance của một Class được tạo ra thì contructor function này sẽ được tự động gọi (gọi đầu tiên) nói đơn giản hơn thì khi bạn tạo ra một phiên bản mới của Component và hiển thị trên màn hình (điều này tương đương với việc bạn tạo ra một instance mới của class vì class chính là nơi xây dựng nên component) thì contructor function của class sẽ được invoked đầu tiên.
=> Tính chất này cũng thích hợp để chúng ta khởi tạo State vì State phải được khởi tạo ngay khi component được tạo ra.
a) Định nghĩa :
+ Là thành phần giúp ta chia nhỏ giao diện người dùng (UI) để tăng tính tái sử dụng.
+ 2 vai trò của component là tạo ra phần HTML cho người dùng và xử lý hành động của người dùng (feed back)
+ Chú ý : chia giao diện ra càng nhỏ thì khả năng tái sử dụng càng cao.
b) Tạo ra Component như thế nào ?
- Có 2 cách để tạo ra component
+ Dùng function (function component)
+ Dùng class (class component)
=> Tạo ra component từ function hay class cũng giống như tạo object từ contructor function hay class bản chất không khác nhau.
=>Lúc nào thì dùng function lúc nào thì dùng class ??
+ Chúng ta xử dụng function khi component này đơn giản , ít logic , và chúng ta đã có thể xác định chính xác nội dung của component này là gì .
+ Sử dụng phù hợp cho các trường hợp còn lại :v
- Sau đây là các lý do mà mình hay sử dụng class
+ Tổ chức code dễ dàng hơn (các này thực hành mới thấy được)
+ Đọc code dễ hơn . tưởng tượng xem bạn nhảy vào đọc code mà thấy mấy chục các function và không thể phân biệt đâu là hàm chức năng đâu là function component.
+ Xử lý thông tin đầu vào của người dùng dễ dàng hơn.(cái này bạn cũng phải thực hành nhiều mới thấy được tác dụng )
- Một số quy tắc khi dùng Class Component
c)
2.Props (Properties)
+ Props giúp các component giao tiếp với nhau .
+ Props được truyền từ parent componet sang children component.
+ Props là bất biến tức là khi bạn truyền nó vào hàm thì nó không thể thay đổi được.
+ Do props không thay đổi được nên chúng ta mới cần đến state.
3.State
+ Là trạng thái của một componet.
+ Hiểu đơn giản nó là một object chứa dữ liệu của một component nhất định
+ State có thể thay đổi được.
=> Có 2 cách để khởi tạo State :
+ Định nghĩa trong contructor với cú pháp this.setState({})
+ Định nghĩa trong ở bên ngoài contructor với cú pháp state({})
- Khi bạn update state thì component chứa nó sẽ tự động được render lại.
=>Nếu chúng ta muốn một component được update thì chỉ cần update state của nó.
- Chú ý rằng state chỉ có thể update bằng cách sử dụng function setState.
- Sate phải được khai báo ngay khi component được khởi tạo.
4.Contructor
+ Là một hàm đặc biệt.
+ Đối số mặc định đầu tiên của nó là props.
+ Được gọi bất cứ khi nào một thể hiện của Class được tạo ra...Bạn nào học Java chắc không xa lạ với khái niệm này.
+ Khi tạo ra một Contructor function phải invoked hàm super (hàm super dùng để gọi contructor funticon class cha của nó), class App kế thừa từ class React.Component mà bản thân class React.Component có contructor function của riêng nó dùng để thiết lập một số tiến trình , thiết lập khi khởi tạo các Component vậy nên khi App kế thừa React.Component thì phảigọi hàm super để invoked contructor function của React.Component để đảm bảo các tiến trình và thiết lập vẫn được gọi.
+ Bất cứ khi nào một instance của một Class được tạo ra thì contructor function này sẽ được tự động gọi (gọi đầu tiên) nói đơn giản hơn thì khi bạn tạo ra một phiên bản mới của Component và hiển thị trên màn hình (điều này tương đương với việc bạn tạo ra một instance mới của class vì class chính là nơi xây dựng nên component) thì contructor function của class sẽ được invoked đầu tiên.
=> Tính chất này cũng thích hợp để chúng ta khởi tạo State vì State phải được khởi tạo ngay khi component được tạo ra.
Nhận xét
Đăng nhận xét