了解 React 之 hooks（三）

2021-10-12 12:51:45 字數 1150 閱讀 6901

在前面的文章 了解 react 之 hooks（二） 中介紹了 hooks 的 3 個效能優化 api，分別為 react.memo、react.usecallback、react.memo。本文主要介紹 useeffect 的第二個引數。

1. 使用 useeffect，不給第二個引數

import react,


from


'react'


;import reactdom from


'react-dom'


;import child from


'./child'


;function()


);return


<


/div>


}export
現象：useeffect 沒有第二個引數時會不停的重新整理頁面。

2. 使用 useeffect，第二個引數為空陣列

import react,


from


'react'


;import reactdom from


'react-dom'


;import child from


'./child'


;function()


,);return


<


/div>


}export
現象：useeffect 第二個引數為空陣列時只執行一次。

3. 使用 useeffect，第二個引數為陣列中放置變數

import react,


from


'react'


;import reactdom from


'react-dom'


;import child from


'./child'


;function()


,[num]);


return


>


<


/div>


}export
現象：useeffect 第二個引數的陣列中含有變數時，每次變數改變 useeffect 執行便會執行。

注意：第二個引數的陣列中不支援引用型別的變數。

Hooks入門了解

hooks 是乙個讓函式元件具有類元件能力的功能，它將顛覆react的開發模式，它代表react未來的開發方式。比如 我們通常宣告乙個元件都要寫乙個class類，hooks讓我們可以用乙個function來實現。寫法舉例 import react,from react function mycoun...

react中使用hooks替代connect

使用hooks代替connect 在react中的connect的使用 import react,from react import from react redux import from antd import from react redux import from store discove...

react 16 Hooks渲染流程

react對usestate進行了封裝，呼叫了mountstate。function usestate initialstate s s,s,dispatch finally 如果initialstate是函式還可以執行。生成乙個dispatch方法，通過閉包繫結當前states。把初始值存到mem...