Trainning React Native Skill Day 9

[quocvy152]

React Native Design Patterns:

1. Functional Components and Hooks:

• Ưu điểm: Đơn giản hóa các component, nâng cao khả năng đọc code và tạo điều kiện thuận lợi cho việc quản lý trạng thái bằng các hook tích hợp như useState, useEffect và hook tùy chỉnh cho logic chia sẻ, dễ maintain quản lý hơn.

• Nhược điểm: Quá phụ thuộc vào hook có thể dẫn đến logic phức tạp có thể được quản lý tốt hơn ở nơi khác.

• Các trường hợp sử dụng: Lý tưởng cho hầu hết các thành phần giao diện người dùng và bất kỳ tình huống nào cần đến các phương thức trạng thái hoặc vòng đời mà không cần đến các Class Component.

• Các phương pháp thực hành tốt nhất: Sử dụng useState cho trạng thái thành phần cục bộ, useEffect cho các side effects và các hook tùy chỉnh để tái sử dụng logic giữa các thành phần.

2. Context API and State Management

• Ưu điểm: Cung cấp cách truyền dữ liệu qua Component Tree mà không cần phải truyền props theo cách thủ công ở mọi cấp độ.

• Nhược điểm: Không phù hợp để quản lý các state mà có tần suất cập nhật cao; có thể dẫn đến các vấn đề về hiệu suất.

• Trường hợp sử dụng: Management Global State, xác thực người dùng và tùy chọn.

• Các phương pháp hay nhất: Sử dụng song song với useReducer để có logic trạng thái phức tạp hơn và để đảm bảo rằng các cập nhật trạng thái được xử lý có thể dự đoán được

3. Redux for State Management

[quocvy152]

Tại sao lại xảy ra memory leaks ?

1. Sử dụng và quản lý các Event Listener không tốt

2. Sử dụng setTimeout hoặc setInterval nhưng không clear đi các function này khi Component Unmounted

3. Không giải phóng các resource như network connection, database connect, file handler khi không sử dụng nữa cũng có thể gây rò rỉ bộ nhớ 4. Cicurlar References:

• Một ví dụ về circular references có thể là khi một đối tượng A tham chiếu đến một đối tượng B, và đối tượng B tham chiếu trở lại đến đối tượng A, tạo thành một vòng lặp tham chiếu. Khi này, garbage collector không thể giải phóng bộ nhớ được vì có ít nhất một đối tượng vẫn còn được tham chiếu và không thể truy cập được. 5. Large Data Structures
• Khái niệm này chỉ đến việc là lưu trữ một data structure lớn trong state hoặc state management của ứng dụng mà không clean nó đúng cách có thể dẫn đến việc sử dụng bộ nhớ quá mức
• Ví dụ: có 1 component sẽ thực hiện khi người dùng nhấp vào 1 button sẽ tạo ra một array với 100.000 phần tử sau đó cập nhật vào state của ứng dụng, khi người dùng nhấp vào button nhiều lần sẽ dẫn đến việc sử dụng bộ nhớ lớn có thể gây ra hiện tượng giảm performance hoặc tràn bộ nhớ
• Fix proplem: giải quyết bằng cách thêm 1 đoạn code cleanup khi component Unmounted sẽ setState cho biến dữ liệu lớn đó thành giá trị rỗng 6. Persistent Closures 7. Native Memory Leaks: Memory leaks can also occur in native code (Objective-C, Java, or C++) used in React Native modules. This can happen due to improper memory management practices or native memory leaks in third-party libraries

[quocvy152]

Closure Function

• Chỉ các function có thể sử dụng các biến trong scope của function chứa nó mà không cần khai báo biến đó ở trong Closure Function, ngay cả khi Function chứa Closure Function đã thực thi xong
• Closure Function có 3 scope chain:
  1. Các biến được khai báo bên trong Closure Function
  2. Các biến của Function chứa Closure Function
  3. Có thể truy cập các Global Variable