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

Các mẹo nhỏ để tăng hiệu suất trong React component

0 0 34

Người đăng: Quynh Tran

Theo Viblo Asia

Hello hello, hôm nay mình sẽ chia sẻ một số cách để làm tăng hiệu suất của React khi chúng ta sử dụng với MobX. Và nó hầu hết có thể áp dụng khi chúng ta sử dụng React, không phải dành riêng cho MobX nhé.

Let's gooooooooooo!!!!!!!

1. Chia nhỏ các component (Use many small components)

Observer components sẽ theo dõi tất cả các giá trị mà chúng sử dụng và tracking lại nếu bất kỳ giá trị nào trong số chúng thay đổi. Vì vậy, các component của bạn càng nhỏ, thay đổi mà chúng phải re-renderlại càng nhỏ. Điều đó có nghĩa là các component của bạn render độc lập với nhau.

2. Hiển thị danh sách trong các component riêng biệt (Render lists in dedicated components)

Điều trên đặc biệt đúng khi rendering collection lớn. React nổi tiếng là tệ trong việc rendering collection lớn vì trình điều chỉnh phải đánh giá các thành phần được tạo ra bởi một collection trên mỗi lần thay đổi collection. Do đó, bạn nên có components chỉ map một collectionrender nó, và không render gì khác.

Không nên:

const MyComponent = observer(({ todos, user }) => ( <div> {user.name} <ul> {todos.map(todo => ( <TodoView todo={todo} key={todo.id} /> ))} </ul> </div>
))

Trong danh sách trên, React sẽ không cần thiết phải điều chỉnh components TodoView khi user.name thay đổi. Chúng sẽ không re-render, nhưng bản thân quá trình điều chỉnh rất tốn kém.

Nên:

const MyComponent = observer(({ todos, user }) => ( <div> {user.name} <TodosView todos={todos} /> </div>
)) const TodosView = observer(({ todos }) => ( <ul> {todos.map(todo => ( <TodoView todo={todo} key={todo.id} /> ))} </ul>
))

3. Không nên sử dụng indexes làm keys (Don't use array indexes as keys)

Không sử dụng array indexes hoặc bất kỳ giá trị nào có thể thay đổi trong tương lai làm key. Tạo id cho các đối tượng của bạn nếu cần.

4. Giá trị tham chiếu muộn (Dereference values late)

Khi sử dụng mobx-react khuyến khích sử dụng giá trị tham chiếu muộn. Điều này là do MobX sẽ tự động re-render components mà bỏ qua các giá trị có thể quan sát được. Nếu điều này xảy ra sâu hơn trong component tree của bạn, thì sẽ có ít component phải re-render lại hơn.

Chậm hơn:

<DisplayName name={person.name} />

Nhanh hơn:

<DisplayName person={person} />

Trong ví dụ nhanh hơn, sự thay đổi trong thuộc tính tên chỉ kích hoạt DisplayName để hiển thị lại, trong khi ở ví dụ chậm hơn, chủ sở hữu của thành phần cũng phải hiển thị lại. Không có gì sai với điều đó, và nếu việc hiển thị thành phần sở hữu đủ nhanh (thường là như vậy!), Thì cách tiếp cận này hoạt động tốt.

5. Function props {?}

Bạn có thể nhận thấy rằng để bỏ qua các giá trị tham chiếu muộn, bạn phải tạo observer components nhỏ trong đó mỗi component được tùy chỉnh để hiển thị một phần dữ liệu khác nhau, ví dụ:

const PersonNameDisplayer = observer(({ person }) => <DisplayName name={person.name} />) const CarNameDisplayer = observer(({ car }) => <DisplayName name={car.model} />) const ManufacturerNameDisplayer = observer({ car}) => ( <DisplayName name={car.manufacturer.name} />
)

Điều này nhanh chóng trở nên mệt mỏi nếu bạn có nhiều dữ liệu có kiểu khác nhau. Một giải pháp thay thế là sử dụng một hàm trả về dữ liệu mà bạn muốn:

const GenericNameDisplayer = observer(({ getName }) => <DisplayName name={getName()} />)

Sau đó, bạn có thể sử dụng component như sau:

const MyComponent = ({ person, car }) => ( <> <GenericNameDisplayer getName={() => person.name} /> <GenericNameDisplayer getName={() => car.model} /> <GenericNameDisplayer getName={() => car.manufacturer.name} /> </>
)

Với cách này sẽ cho phép bạn sử dụng lại GenericNameDisplayer trong toàn bộ ứng dụng của bạn để hiển thị bất kỳ tên nào và bạn vẫn giữcomponent re-rendering ở mức tối thiểu.

Tài liệu tham khảo: https://mobx.js.org/react-optimizations.html

Cảm ơn mọi người đã theo dõi bài viết, hẹn mọi người ở các bài viết tiếp theo nhé ❤️

Bình luận

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

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

Tìm hiểu về Redux Thunk

Chào mọi người, nếu bạn là người đã biết về React và đang làm quen với Redux chắc hẳn bạn đang rất mơ hồ về các khái niệm cơ bản của Redux như dispatch, store, action creator,... bạn còn đang vật lộn với đống document của Redux để hiểu những khái niệm đó và bạn nghe ai đó trong team nói về Redux Thu

0 0 371

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

[React] Giới thiệu tổng quát về Redux Toolkit

1. Redux Toolkit (RTK) là gì và tại sao lại có nó. . .

0 0 6.6k

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

Uống Pepsi code Vue đi - Uống Cocacola code React nha ;)

. (Nguồn ảnh: Internet). Chào các bạn, chào các bạn. Let's go . 1.

0 0 130

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

Cài đặt taillwind css cho dự án React

Trong bài viết cùng mình tìm hiểu cách cài đặt tailwind css cho một dự án React sẵn có. .

0 0 127

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

Formik vs React Hook Form (Phần 1)

Các lập trình viên Front End đều làm việc rất nhiều với form cùng sự phức tạp của ứng dụng. Do vậy chúng ta cần những thư viện form mạnh mẽ hỗ trợ quản lý các form state, form validation... Thành phần module. Formik bao gồm có 9 dependencies khác. . React Hook Form thì không có.

0 0 344

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

Hướng dẫn React Redux cho người mới bắt đầu - Phần 1

Lời mởi đầu. Chào các bạn, ở thời điểm thực hiện bài viết này mình cũng là một người đang bắt đầu tìm hiểu và học với ReactJs và Redux, trong quá trình tìm hiểu đọc các tài liệu về thư viện này mình có tìm được một bài hướng dẫn khá hay nên đã quyết định chia sẻ với mọi người .

0 0 262