不要在 render 方法中使用 HOC

2021-09-27 01:46:11 字數 1917 閱讀 8228

官方介紹:

react 的 diff 演算法(稱為協調)使用元件標識來確定它是應該更新現有子樹還是將其丟棄並掛載新子樹。 如果從 render 返回的元件與前乙個渲染中的元件相同(===),則 react 通過將子樹與新子樹進行區分來遞迴更新子樹。 如果它們不相等,則完全解除安裝前乙個子樹。

例子:下面有兩個計數器,第乙個是正常元件,第二個是函式包裹的高階元件,點第乙個的時候第二個元件的狀態會清空。

function

render()

}}class

example

extends

react.component

}handleclick=(

)=>)}

render()

<

/div>

>

+<

/button>

<

/>)}

}class

extends

react.component

}handleclick=(

)=>)}

render()

<

/div>

>

+<

/button>

>

<

/>)}

}export

這不僅僅是效能問題 - 重新掛載元件會導致該元件及其所有子元件的狀態丟失。

解決上面的問題

function

render()

}}class

example

extends

react.component

}handleclick=(

)=>)}

render()

<

/div>

>

+<

/button>

<

/>)}

}let mycomponent =

(example)

// 在元件之外建立

class

extends

react.component

}handleclick=(

)=>)}

render()

<

/div>

>

+<

/button>

>

<

/>)}

}export

如果在元件之外建立 hoc,這樣一來元件只會建立一次。因此,每次 render 時都會是同乙個元件。一般來說,這跟你的預期表現是一致的。

function

render()

}}class

example

extends

react.component

}handleclick=(

)=>)}

render()

<

/div>

>

+<

/button>

<

/>)}

}class

extends

react.component

this

.mycomponent =

(example)

// 在建構函式裡面建立

}handleclick=(

)=>)}

render()

<

/div>

>

+<

/button>

>

<

/>)}

}

在極少數情況下,你需要動態呼叫 hoc。你可以在元件的生命週期方法或其建構函式中進行呼叫

不要在v for中使用v if

一 前言 以下 寫法,相信80 的初學者寫過,即使沒寫過,也應該見過!v for product in products key product.id v if product.price 50 li ul 使用 v if 來過濾 v for 迴圈的資料是乙個超級大錯誤!儘管這看起來很直觀,但它會導...

不要在標頭檔案中使用using namespace

在這裡,我毫不迴避地說了這句話 引用我再也不想在任何標頭檔案中看到 using namespace 了 作為乙個開發者 團隊領導者,我經常會去招聘新的專案成員,有時候也幫助其他組的人來面試應聘者。作為應聘流程之一,我經常要求應聘者寫一些 因此我檢查過相當多的 在最近提交的c 中,我注意到乙個趨勢,在...

不要在MySQL中使用「UTF 8」

mysql 從 4.1 版本開始支援 utf 8,也就是 2003 年,而今天使用的 utf 8 標準 rfc 3629 是隨後才出現的。舊版的 utf 8 標準 rfc 2279 最多支援每個字元 6 個位元組。2002 年 3 月 28 日,mysql 開發者在第乙個 mysql 4.1 預覽版...