Vấn đề là gì?

Khi các bạn build một React tiện ích thực sự bự để ship hàng hàng triệu người dùng, chắc hẳn rằng bạn đề xuất có phương án để cai quản lí state như Redux, React Context, Mobx … Và mặc dù bạn xài tủ sách nào để quản lí state chúng ta cũng sẽ gặp vấn đề lúc state update, nó dẫn tới những component cùng re-render làm cho chậm app của bạn.

Bạn đang xem: Hãy nêu một số cách tối ưu khi dùng reactjs

Thỉnh thoảng nếu có một component làm cho quá nhiều giám sát và đo lường nặng phía bên trong thì sẽ có tác dụng chậm quy trình re-render, tuy vậy với trường hợp này có thể dễ nhận biết và fix chỉ cho 1 component.

Nhưng nếu nhiều component re-render và một lúc với gây ảnh hưởng đến performance thì họ rất cực nhọc để xác định được vấn đề.

Xem thêm: Chương 2 Biểu Diễn Dung Sai Trên Bản Vẽ Của Các Chi Tiết Lắp Ghép

Vậy làm sao bọn họ tối ưu app trong trường phù hợp này? giả dụ component re-render trong khi những props của chính nó không cố gắng đổi, bạn cũng có thể sử dụng React.memo để buổi tối ưu. Nhưng lại lạm dụng React.memo cũng gây ra các vấn đề sau:

Nó làm tăng độ phức tạp của code (bởi vị trong một vài trường hợp bạn cần sử dụng phối hợp React.useCallback với React.memo, dẫn tới các bạn phải quản ngại lí một đống dependency menu cho useCallback)Nếu áp dụng memo, React vẫn phải lưu trữ, đo lường và thống kê nhiều để đưa ra quyết định component gồm nên re-render xuất xắc không?

Cho yêu cầu rất nặng nề chọn được phương pháp tối ưu hoàn hảo. Bọn họ phải hi sinh một cái gì đấy để dành được performance. đặc biệt là tất cả đáng giỏi không? chúng ta phải suy xét kỹ lưỡng trước khi sử dụng một nghệ thuật nào kia để về tối ưu performance. Có một cách dễ dàng và đơn giản là bạn có thể bớt sử dụng global state với đẩy state kia về component state (state collocation). Đó có lẽ là bí quyết dễ có tác dụng và kết quả nhất. Tham khảo bài viết về state collocation.

State collocation cho Dog Name

Giả sử bọn họ có một vận dụng ở đây. Chúng ta thử giả lập slow CPU như những thiết bị mobile (6x slowdown) với tăng số lượng row và column lên khoảng 100×100.

Khi người tiêu dùng sử dụng ứng dụng họ bước đầu than phiền những lần gõ vào đầu vào thì những ký tự bình luận rất đủng đỉnh trên màn hình (độ trễ khoảng 1s), đặc biệt là trên những thiết bị di dộng cùi bắp