Xin chào anh em, mình đã quay lại để tiếp tục series blog về ReactJS căn bản, và nếu mọi người chưa
biết về ReactJS thì có thể xem lại bài blog trước của mình tại đây:
Còn phần 2 này mình sẽ giới thiệu về Props, State và Life Cycle trong ReactJS. Cùng bắt đầu nào.
I. State là gì?
Nếu các bạn đã đọc qua về ReactJS thì sẽ hiểu khái niệm component, đây là các thành phần chứa các mã JSX
nhằm cấu tạo nên 1 trang web, bạn sẽ có thể có các component như: component hiển thị danh sách,
component hiển thị banner quảng cáo…
Vậy dữ liệu của trang web sẽ được lưu ở đâu, trong các component dữ liệu sẽ được lưu vào state
và state chính là thứ quyết định trạng thái của component (hiển thị như thế nào, có được render ra hay không...).
State là private tức là bạn chỉ có thể được phép thay đổi state ở chính component chứa nó.
Hãy xem ví dụ dưới đây bạn sẽ hiểu rõ hơn về state trong component
II. Props là gì?
Hiểu đơn giản nhất props là những gì mà component nhận được từ bên ngoài truyền vào (component cha, store...).
Nó có thể là 1 function, 1 object, 1 array hay thậm chí chỉ là 1 string.
Khác với state bạn không thể thay đổi giá trị của props ở trong component,
muốn thay đổi props bạn phải tác động vào chính nơi truyền vào props.
Các bạn có thể xem 1 ví dụ ở dưới đấy để hiểu rõ hơn về props trong component
III. Life Cycle của Component
Trong ReactJS component cũng có vòng đời (life cycle) của nó, từ trước khi component được render
cho đến khi hoàn thành việc render, từ khi chưa có dữ liệu cho đến khi có dữ liệu truyền vào...
Vì vậy ReactJS có xây dựng các hook function để giúp chúng ta dễ dàng xử lý các sự kiện đối với life cycle của component.
Bây giờ mình sẽ nói rõ hơn về những hàm life cycle hay được sử dụng:
1. componentWillMount: Hàm này sẽ thực hiện trước khi component được render ra,
nó sẽ rất hữu dụng trong trường hợp các bạn muốn thực hiện trước 1 sự kiện ví dụ như call API chẳng hạn
2. componentDidMount: Hàm này sẽ thực hiện sau khi component được render thành công,
nó sẽ rất hữu dụng trong trường hợp các bạn muốn thực hiện 1 sự kiện ví dụ như call đến 1 function để đếm ký tự chẳng hạn. Thực sự mình rất ít khi sử dụng hàm này nên theo mình nó khá 'phế' :D
3. componentWillReceiveProps: Đây là 1 hàm mà theo mình tần suất sử dụng của nó chắc chỉ kém 'chú' đầu tiên :)),
hàm này được sử dụng để kiểm tra xem có props mới được truyền vào component hay không,
nếu có thì sẽ xử lý 1 loạt sự kiện từ abc -> xyz tùy vào khả năng bạn mở rộng nó đến đâu.
Cá nhân mình khá thích sử dụng hàm này và hầu hết trong những component con mình đều sử dụng nó để xử lý dữ liệu trước khi component được render
4. shouldComponentUpdate: Hàm này sẽ trả về giá trị true or false (mặc định là true),
hàm này sẽ quyết định component có được render tiếp hay không, ví dụ các bạn muốn sau khi state bị thay đổi hay có 1 props nào đó được truyền vào thì không render ra component đó nữa
5. componentWillUpdate: Hàm này được gọi sau khi chúng ta cập nhật state và trước khi component được render lại,
nó được sử dụng khá nhiều trong việc kiểm tra dữ liệu thay đổi có khớp với yêu cầu hay không.
6. render: Hàm này xuất hiện trong tất cả component, tác dụng của nó là để kết xuất các các đoạn mã JSX ra thành các node DOM để trình duyệt biên dịch và hiển thị ra các đoạn mã html + css + javascript.
7. componentDidUpdate: componentWillUpdate được gọi và xử lý 1 loạt sự kiện, sau đó tiếp tục hàm render được gọi và thực hiện cho đến khi xong nhiệm vụ thì đến lượt 'chú' này vào sân :)).
Các hook function cuối cùng mình không làm ví dụ vì nó cũng khá dễ hiểu rồi, mọi người có thể tự code để hiểu rõ hơn nhé :D.
Qua đây mình hy vọng sẽ nhận được nhiều ý kiến đóng góp của cộng đồng để mình có thể tiếp tục các series tiếp theo,
cùng với đó là nâng cao được kiến thức cũng như kỹ năng của bản thân.
Chúc mọi người có 1 ngày làm việc vui vẻ, chào thân ái và đầy thần thái :)).
Sau khi mình đã dành mất 4 tiếng thì mình cũng đã hiểu được ReactJS, mình và bạn mình xin cảm ơn bạn rất nhiều! Chúc bạn luôn gặp nhiều may mắn trong cuộc sống.
ReplyDelete