1.解決重復(fù)渲染問題

我們大多數(shù)人都知道虛擬 DOM 是如何工作的，但最重要的是檢測何時(shí)觸發(fā)樹比較。當(dāng)我們可以跟蹤它時(shí)，我們可以控制組件的重新渲染，并最終防止意外的性能流。令人驚訝的是，它并不難捕捉。首先，將 React Devtool 擴(kuò)展添加到瀏覽器。

• 然后打開瀏覽器開發(fā)者工具（在 Chrome 中是 Option + ? + J（在 macOS 上），或 Shift + CTRL + J（在 Windows/Linux 上）。

• 選擇組件

• 點(diǎn)擊設(shè)置圖標(biāo)

• 并選中“組件渲染時(shí)突出顯示更新”

就是這樣，現(xiàn)在，當(dāng)我們與 UI 交互時(shí)，它會在當(dāng)前重新渲染的元素上顯示綠色邊框。知道了這一點(diǎn)，我們就可以分析我們的任何 React 組件并重構(gòu)它們以避免不必要的重新渲染。

2.通過拆分組件減少重新渲染

如果我們能夠減少意外重新渲染元素的數(shù)量，它將解決 React 中的大部分性能問題。

但我們必須首先回答這個(gè)問題：“是什么觸發(fā)了重新渲染？”。答案很簡單，狀態(tài)改變了。

每次組件狀態(tài)發(fā)生變化時(shí)，它都會喚醒樹比較，也稱為協(xié)調(diào)，并重新呈現(xiàn)狀態(tài)上下文的元素。

狀態(tài)上下文，是初始化此類狀態(tài)的組件。意思是，如果我們有一個(gè)巨大的組件，它有很多狀態(tài)（不需要相互依賴）并且其中一個(gè)狀態(tài)發(fā)生了變化，它將重新渲染整個(gè)組件元素，這絕對不是我們想要的。

那么，解決方案是什么？解決方法是通過將組件的一部分和它的一些狀態(tài)移動到它自己的子組件中來分離狀態(tài)上下文，現(xiàn)在，讓我們看一下這個(gè)例子：

假設(shè)我們有一個(gè)帶有搜索過濾器的表格組件。搜索過濾器是一個(gè)受控輸入，其狀態(tài)在輸入文本更改后更新。這是它的樣子：

當(dāng)我們開始在搜索輸入字段中輸入時(shí)會發(fā)生什么？

是的，它將重新呈現(xiàn)整個(gè)表格元素。發(fā)生這種情況是因?yàn)檩斎霠顟B(tài)上下文與表組件共享相同的上下文。

現(xiàn)在，讓我們嘗試我們的解決方案，將輸入元素及其狀態(tài)移動到一個(gè)單獨(dú)的組件中，并將其注入到表格組件中。

神奇的事情發(fā)生了，表格組件不再重新渲染。我們稍后可以通過從輸入發(fā)出事件來控制我們希望輸入影響表格元素的確切時(shí)間來增強(qiáng)功能。

好的做法是拆分組件以分離狀態(tài)上下文，以避免冗余的重新渲染。

3.什么是實(shí)例重創(chuàng)建，如何避免？

我們已經(jīng)發(fā)現(xiàn)狀態(tài)更改會觸發(fā)組件重新渲染，但是我們需要考慮另一個(gè)重要的副作用。

當(dāng)狀態(tài)改變和協(xié)調(diào)發(fā)生時(shí)，它將重新初始化整個(gè)組件實(shí)例并保持新的狀態(tài)值。這對我們來說意味著，在協(xié)調(diào)期間，將重新創(chuàng)建所有函數(shù)實(shí)例，以便能夠考慮新的狀態(tài)值，我們不需要它，在大多數(shù)情況下，函數(shù)可以只依賴于幾個(gè)狀態(tài)，我們不想重新創(chuàng)建不依賴于已更改狀態(tài)的函數(shù)實(shí)例。

這是一個(gè)提高性能的機(jī)會，我們有幾個(gè)解決方案：useCallback 和 useRef。讓我們看個(gè)例子：

const?{someState,?setSomeState}?=?useState('')
const?{otherState,?setOtherState}?=?useState('')
const?foo?=?()?=>?{console.log(someState)}

這是最常見的例子。我們有依賴于狀態(tài) someState 的 foo。當(dāng) someState 改變時(shí)，它將重新創(chuàng)建 foo 的新實(shí)例。

這段代碼的問題是，即使其他一些狀態(tài)發(fā)生變化，比如 otherState，foo 也會被重新創(chuàng)建，這是我們實(shí)際上不想要的。我們可以使用 useCallback 來告訴 React 我們的函數(shù)狀態(tài)依賴是什么，以便更明確地說明何時(shí)重新創(chuàng)建實(shí)例：

const?{someState,?setSomeState}?=?useState('')
const?{otherState,?setOtherState}?=?useState('')
const?foo?=?useCallback(()?=>?{console.log(someState)},?[someState])

在此示例中，我們將依賴項(xiàng)數(shù)組傳遞給 useCallback 掛鉤。更好的是，foo 將避免其他狀態(tài)更改。

另一種選擇是使用 useRef。useRef——你可以把它想象成和 useState 一樣，但不會觸發(fā)組件重新渲染（UI 不會更新）。useRef 沒有依賴列表，所以我們需要傳遞 someState as foo 屬性：

const?{someState,?setSomeState}?=?useState('')
const?{otherState,?setOtherState}?=?useState('')
const?foo?=?useRef((currentSomeState)?=>?{console.log(currentSomeState)}).current;

在這種情況下，我們根本不會重新創(chuàng)建 foo 實(shí)例。

結(jié)論：使用 useCallback 和 useRef 來控制函數(shù)實(shí)例的重新創(chuàng)建。

4.不要偷懶懶加載

React 默認(rèn)同步渲染組件。這意味著組件將等到其子項(xiàng)被渲染后再渲染自己。沒有必要等待，尤其是當(dāng)一些子組件沒有耦合時(shí)。它可能會導(dǎo)致頁面掛起。

假設(shè)我們點(diǎn)擊了一些導(dǎo)航鏈接，假設(shè)將我們重定向到另一個(gè)頁面。導(dǎo)航將等待所有頁面組件呈現(xiàn)完成重定向。它會影響用戶體驗(yàn)，人們不會等待，只會離開您的網(wǎng)站。

我們需要使頁面內(nèi)容異步呈現(xiàn)，以免損害導(dǎo)航。解決方案是將您的頁面組件包裝到 React.lazy(() 并告訴 React 完成導(dǎo)航，然后等待頁面組件完成渲染：

const?PageComponent?=?React.lazy(()?=>?import('./PageComponent'));

稍后我們可以使用在頁面組件尚未準(zhǔn)備好時(shí)，顯示一些加載動畫。

<Suspense?fallback={<div>Loading...</div>}>
???<PageComponent?/>
</Suspense>

這并不意味著我們必須在任何地方都使用 Lazy load 組件，當(dāng)我們在不會對性能造成太大損害的地方使用它時(shí)，它可能會導(dǎo)致過度工程。

另一種場景是一些組件可能默認(rèn)隱藏在 UI 中，所以我們不必等待它們。例如模態(tài)窗口、對話框、抽屜和可折疊的側(cè)面板。

延遲加載頁面組件和隱藏的 UI 組件。

5.何時(shí)使用 React 片段？

它經(jīng)常發(fā)生，當(dāng)我們在 JSX 中構(gòu)建一些布局并想要對我們的元素進(jìn)行分組時(shí)，在大多數(shù)情況下我們使用

標(biāo)簽。或者，例如，我們有我們想要移動到單獨(dú)組件中的父子 HTML 標(biāo)記：

<ul>
????<li>Item?1</li>?<---?|?Want?to?move?it?to?child?<Li>?|
????<li>Item?2</li>?<---?|???????????????????????????????|
</ul>

因此，當(dāng)我們將?<li>?移動到單獨(dú)的組件中時(shí)，例如：

const?Li?=?()?=>?{
????return?(
????????<div>
????????????<li>Item?1</li>
????????????<li>Item?2</li>
????????</div>
????)
}

并改變它：

<ul>
????<Li/>
</ul>

渲染后，它看起來像這樣：

<ul>
????<div>
????????<li>Item?1</li>??
????????<li>Item?2</li>????
????</div>
</ul>

這將創(chuàng)建一個(gè)我們不需要的額外<div>節(jié)點(diǎn)。

這將使我們的 DOM 樹更加嵌套，從而減慢協(xié)調(diào)過程。

相反， 我們可以將我們的<div>子元素包裝到 Fragment 中。

最初，F(xiàn)ragment 允許您對 DOM 元素進(jìn)行分組，插入后只會導(dǎo)致一次重排。

在 React 中，F(xiàn)ragment 也會讓你減少不必要的節(jié)點(diǎn)。當(dāng)你想對元素進(jìn)行分組時(shí)，你唯一需要做的就是使用 Fragment 而不是?<div>：

const?Li?=?()?=>?{
????return?(
????????<>?/*?or?<React.Fragment>,?or?<Fragment>*/
????????????<li>Item?1</li>
????????????<li>Item?2</li>
????????</>
????)
}

就是這樣，就這么簡單。

如果要對元素進(jìn)行分組以減少節(jié)點(diǎn)數(shù)，請使用 Fragment。

6.避免在列出的元素中使用索引作為鍵

大家都知道，如果沒有，Eslint 會強(qiáng)制執(zhí)行在列出的元素中使用鍵，例如：

<ul>
????<li?key="1">Item?1</li>??
????<li?key="2">Item?2</li>????
</ul>

React 中的關(guān)鍵是唯一標(biāo)識符，它幫助 React 指向列表中的正確元素并更新正確的元素。如果我們使用索引作為列表中的鍵，比如：

<ul>
????{[1,?2].map((val,?index)?=>?<li?key={index}>Item?{val}</li>)}??
</ul>

我們將元素映射到它的索引。但是如果我們有排序，列表中元素的順序可能會改變，初始鍵將不再指向正確的元素。

始終使用唯一 id 作為列出元素的鍵，如果對象沒有它，您可以使用外部庫顯式分配，如 uid。

7.避免Spread Props

這是今天的最后一個(gè)修改調(diào)整技巧，已經(jīng)很多了， 你一定見過，甚至自己親手做過spreading props。就像是：

const?Input?=?({?onChange,?...props?})?=>?(
????<input?{...props}?onChange={e?=>?onChange(e.target.value)}/>
);

它不僅迫使您猜測實(shí)際輸入接收到的屬性是什么，而且還會在輸入元素中創(chuàng)建一堆您不一定需要的屬性。

讓它明確，并且不要害怕根據(jù)需要傳遞盡可能多的屬性，您總是可以將它們分組到某個(gè)對象中：

const?Input?=?({?onChange,?inputProps:?{value,?type,?className}?})?=>?(
????<input?className={className}?type={type}?value={value}?onChange={e?=>?onChange(e.target.value)}/>
);

很好，現(xiàn)在更具可讀性。

永遠(yuǎn)不要spread props，分別傳遞每個(gè)屬性。

總結(jié)

我想，您可能已經(jīng)知道 Eslint 強(qiáng)制執(zhí)行的一些調(diào)整，但是現(xiàn)在您知道為什么遵循它們很重要了，而且，您可以對代碼進(jìn)行性能分析，這將為您提供改進(jìn)空間。文章來源地址http://www.zghlxwxcb.cn/news/detail-487048.html

到了這里，關(guān)于提高 React 性能的技巧的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！