Giới thiệu
Xin chào, lang thang trên mạng và mình tìm được một bài viết khá hay và hữu ích và quyết định sẽ dịch lại để chia sẻ cho bạn đọc và cho chính mình, bài viết đã chỉ ra rất nhiều lỗi mà mình thường gặp phải khi làm với React.
Bài viết sẽ cung cấp cho bạn một vài cách để dễ dàng cải thiện hiệu suất cho React. Không nhất thiết là bạn phải áp dụng những cách dưới đây, nhưng sẽ tốt hơn nếu bạn biết đến nó và áp dụng vào trường hợp cần thiết.
Nội dung
1. Utilise render bail-out techniques
Mỗi khi component cha updates, component con cũng sẽ update theo bất kể props có thay đổi hay không. Nó đồng nghĩa với việc component con vẫn giữ props như trước, nó vẫn sẽ render lại. Điều này rõ dàng làm mất thời gian xử lý, đặc biệt là với component trees lớn, vì về cơ bản React áp dụng diffing algorithm để kiểm tra giá trị được thay đổi computed tree .
Bạn có thể dễ dàng tránh nó bằng cách sử dụng React.PureComponent, tận dụng shouldComponentUpdate hoặc gộp component trong memo (Higher-Order Component). Bằng cách này bạn có thể chắc chắn rằng component chỉ update khi props có sự thay đổi.
Nhưng cũng phải nhắc bạn rằng thực hiện cách này với component nhỏ thì sẽ không có lợi ích, có thể làm chậm ứng dụng đi một chút (vì react sẽ phải so sánh mỗi khi render component). Như vậy, Kỹ thuật này nên được sử dụng cho những component “nặng ký”.
Tránh sử dụng cho component nhỏ, nếu cần thiết, hãy tách component lớn ra thành nhiều component nhỏ để gộp lại với memo().
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <span class="token comment">// index.jsx</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">ParentComponent</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"> <SomeComponent someProp=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>somePropValue<span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>AnotherComponent</span> <span class="token attr-name">someOtherProp</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>someOtherPropValue<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token comment">// ./SomeComponent.jsx</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">SomeComponent</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>someProp<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token comment">// --------------------------------------------</span> <span class="token comment">// ./AnotherComponent.jsx (1)</span> <span class="token comment">// Component này sẽ render mỗi khi `props.somePropValue` thay đổi</span> <span class="token comment">// Kể cả `props.someOtherPropValue` có thay đổi hay không</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">AnotherComponent</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>someOtherProp<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token comment">// ./AnotherComponent.jsx (2)</span> <span class="token comment">// Component này sẽ chỉ render lại khi `props` thay đổi</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">memo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>someOtherProp<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ./AnotherComponent.jsx (3)</span> <span class="token comment">// Component này cũng sẽ chỉ render lâij khi `props` thay đổi</span> <span class="token keyword">class</span> <span class="token class-name">AnotherComponent</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>someOtherProp<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// ./AnotherComponent.jsx (4)</span> <span class="token comment">// Giống bên trên</span> <span class="token keyword">class</span> <span class="token class-name">AnotherComponent</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span> <span class="token function">shouldComponentUpdate</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props <span class="token operator">!==</span> nextProps <span class="token punctuation">}</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>someOtherProp<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
2. Avoid inline objects
Mỗi khi inline một object, React tạo lại một tham chiếu mới cho object này trên mỗi lần render. Điều này gây ra việc nhận object này coi như là một object mới. Như vậy, shallow equality trong props của component này sẽ trả về false với mỗi lần render.
Điều này gián tiếp tham chiếu tới inline styles mà nhiều người thường sử dụng, mình cũng vậy :v. Inlining styles props trong component sẽ force component và luôn render (trừ khi bạn sử dụng shouldComponentUpdate()), điều này có khả năng dẫn đến những vấn đề về hiệu suất, phụ thuộc vào component bao bọc các component con hoặc không.
Đây là một trick khá hay được sử dụng nếu phải có tham chiếu khác. Ví dụ, nó được tạo bên trong map(), bất kể khi nào thuộc tính của object là primitives (không phải hàm, đối tượng hoặc mảng) hoặc non-primitives với "fixed" references, bạn có thể truyền chúng như props thay thế cho truyền object có chưa chúng như prop đơn lẻ. Làm vậy sẽ cho phép component được hưởng lợi từ kỹ thuật rendering bail-out bằng cách so sánh prop mới và cũ.
Bạn không thể hưởng lợi từ React.PureComponent hoặc memo() nếu bạn sử dụng inline style (hoặc trong general objects). Trong tình huống nhất định, bạn có thể spread contents của object và truyền chúng như là props vào component.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token comment">// Không nên</span> <span class="token keyword">function</span> <span class="token function">Component</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> aProp <span class="token operator">=</span> <span class="token punctuation">{</span> someProp<span class="token punctuation">:</span> <span class="token string">'someValue'</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>AnotherComponent</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> margin<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">aProp</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>aProp<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">}</span> <span class="token comment">// Nên</span> <span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token punctuation">{</span> margin<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">Component</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> aProp <span class="token operator">=</span> <span class="token punctuation">{</span> someProp<span class="token punctuation">:</span> <span class="token string">'someValue'</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>AnotherComponent</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">}</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">aProp</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">}</span> |
3. Avoid anonymous functions
Từ khi anonymous functions là một cách hay để truyền function prop (đặc biệt là cần invoke với props khác như tham số của nó), chúng tham chiếu sự khác biệt mỗi khi render. Nó giống với inline object nói ở phía trên. Để duy trì same reference tới hàm bạn truyền như là một props trong component, bạn có thể bạn có thể khai báo nó như là một class method (nếu bạn sử dụng class-based component) hoặc sử dụng useCallback hook để giữ cùng tham chiếu (nếu bạn sử dụng functional components). Đối với những lúc bạn cần một tham chiếu khác nhau cho từng bộ parameters mà hàm của bạn được gọi (chẳng hạn như hàm tính toán bên trong map()), bạn có thể check out rất nhiều chức năng memoize (như là memoize của lodash). Nó sẽ gọi function caching hoặc listener caching và giúp bạn sử tham chiếu với một dynamic number của anonymous functions ở cost của bộ nhớ trình duyệt.
Đương nhiên inline function là cách dễ nhất và không thực sự gây ra vấn đề về hiệu suất. Điều này có thể là bởi vì bạn sử dụng nó với component nhẹ hoặc component cha không render lại toàn bộ nội dung mỗi khi props thay đổi.
Điều quan trọng cuối cùng đó là anonymous function render props mặc định. Khi bạn sử dụng hàm như children của component, bạn có thể định nghĩa nó bên ngoài component chính, vì đó nó sẽ luôn được fixed refernce.
Thử và bind function props cho method hoặc sử dụng useCallback nhiều nhất có thể để hưởng lời từ kỹ thuật rendering bail-out.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token comment">// Không nên</span> <span class="token keyword">function</span> <span class="token function">Component</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>AnotherComponent</span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> props<span class="token punctuation">.</span><span class="token function">callback</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">}</span> <span class="token comment">// Nên</span> <span class="token keyword">function</span> <span class="token function">Component</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> handleChange <span class="token operator">=</span> <span class="token function">useCallback</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> props<span class="token punctuation">.</span><span class="token function">callback</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>props<span class="token punctuation">.</span>id<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>AnotherComponent</span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">}</span> <span class="token comment">// Nên</span> <span class="token keyword">class</span> <span class="token class-name">Component</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span> <span class="token function-variable function">handleChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>AnotherComponent</span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
4. Lazy load components that are not instantly needed
Có thể không liên quan tới article, nhưng càng ít component được mount thì chúng càng mount nhanh hơn. Vì vậy, nếu khởi tạo ban đầu của bạn cảm thấy khó khăn, bạn có thể giảm lượng clutter bằng cách tải các component khi cần thiết, sau khi initial đã mount xong. Đồng thời bạn sẽ giảm bundles và cho phép người dùng load nhanh hơn. Cuối cùng, bằng cách phân tách initial rendering, bạn đang phân chia khối lượng công việc thành các nhiệm vụ nhỏ hơn. Bạn có thể tìm hiểu React.Lazy cũng như React.Suspense.
Thử và lazy-load component không thực sự thấy rõ (hoặc cần thiết) cho người dùng tới khi họ tương tác với chúng.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token comment">// ./Tooltip.jsx</span> <span class="token keyword">const</span> MUITooltip <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">lazy</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@material-ui/core/Tooltip'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">Tooltip</span><span class="token punctuation">(</span><span class="token punctuation">{</span> children<span class="token punctuation">,</span> title <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>React.Suspense</span> <span class="token attr-name">fallback</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>children<span class="token punctuation">}</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MUITooltip</span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>title<span class="token punctuation">}</span></span><span class="token punctuation">></span></span> <span class="token punctuation">{</span>children<span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MUITooltip</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>React.Suspense</span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// ./Component.jsx</span> <span class="token keyword">function</span> <span class="token function">Component</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Tooltip</span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>AnotherComponent</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Tooltip</span><span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
5. Tweak CSS instead of forcing a component to mount & unmount
Render rất “tốn kém”, đặc biệt khi DOM cần được thay đổi. Bất cứ khi nào bạn có một số loại accordion hoặc tab functionality — tại đó bạn chỉ nhìn thấy một item tại một thời điểm –, bạn có thể muốn ngắt unmount component mà không thể nhìn thấy và gắn kết lại khi nó hiển thị.
Nếu việc component mounted / unmounted là khá nặng thì hành động này có thể tốn kém hơn mức cần thiết và dẫn đến lagginess, trong trường hợp này, bạn có thể ấn nó thông qua CSS, trong khi vẫn giữ content cho DOM. Nhận thấy rằng thỉnh thoảng nó là không thể vì bạn có thể gặp trường hợp các component đó được mounted có thể gặp lỗi, nhưng bạn nên chọn thực hiện cách này khi có thể.
Điều chỉnh opacity về 0 thì gần như là không tốn tài nguyên cho trình duyệt (vì nó không gây reflow) và nên ưu tiên visibility và display bất cứ khi nào có thể.
Thay vì ẩn component thông qua unmouting, đôi lúc, nó có thể có ích khi ẩn qua CSS trong khi vẫn giữ component mounted. Điều này sẽ rất có lợi cho component nặng với thời giian mount/unmounting đáng kể.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token comment">// Tránh làm thế này với component quá nặng cho việc mount/unmount</span> <span class="token comment">// Hồi trước mình cũng mắc phải lỗi này</span> <span class="token keyword">function</span> <span class="token function">Component</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>view<span class="token punctuation">,</span> setView<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">'view1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> view <span class="token operator">===</span> <span class="token string">'view1'</span> <span class="token operator">?</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SomeComponent</span> <span class="token punctuation">/></span></span> <span class="token punctuation">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>AnotherComponent</span> <span class="token punctuation">/></span></span> <span class="token punctuation">}</span> <span class="token comment">// Do this instead if you' re opting for speed & performance gains</span> <span class="token comment">// Thay vào đó hãy sử dụng cách này để tăng tốc độ và hiệu suất</span> <span class="token keyword">const</span> visibleStyles <span class="token operator">=</span> <span class="token punctuation">{</span> opacity<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> hiddenStyles <span class="token operator">=</span> <span class="token punctuation">{</span> opacity<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">Component</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>view<span class="token punctuation">,</span> setView<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">'view1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>React.Fragment</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SomeComponent</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>view <span class="token operator">===</span> <span class="token string">'view1'</span> <span class="token operator">?</span> visibleStyles <span class="token punctuation">:</span> hiddenStyles<span class="token punctuation">}</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>AnotherComponent</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>view <span class="token operator">!==</span> <span class="token string">'view1'</span> <span class="token operator">?</span> visibleStyles <span class="token punctuation">:</span> hiddenStyles<span class="token punctuation">}</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>React.Fragment</span><span class="token punctuation">></span></span><span class="token plain-text"> ) } </span> |
6. Memoize expensive calculations
Có lúc việc render là không cần thiết, nhưng component lại là một functional, rendering xảy ra với bất kì phép tính nào có trong component. Các phép tính có giá trị không đổi với mỗi lần render có thể được memoized bằng cách sử dụng useMemo() hook. bạn có thể tìm hiều thêm qua link này.
Mục tiêu là giảm khối lượng công việc cho JS khi render, vì vậy main thread sẽ bị block trong thời gian ít hơn.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token comment">// không nên</span> <span class="token keyword">function</span> <span class="token function">Component</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> someProp <span class="token operator">=</span> <span class="token function">heavyCalculation</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>AnotherComponent</span> <span class="token attr-name">someProp</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>someProp<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">}</span> <span class="token comment">// Nên, `someProp` sẽ tính toán lại</span> <span class="token comment">// chỉ có `props.item` thay đổi</span> <span class="token keyword">function</span> <span class="token function">Component</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> someProp <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">heavyCalculation</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>item<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>props<span class="token punctuation">.</span>item<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>AnotherComponent</span> <span class="token attr-name">someProp</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>someProp<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">}</span> |
Tổng kết
Trên đây là một số Tip hữu ích cho bạn khi làm việc với ReactJs, cảm ơn đã đọc hết bài và đừng quên upvote hoặc clip bài viết ủng hộ mình nhé. Happy coding 
!