React的新特性之Hook

hook 是 react 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 react 特性。

hook的含義：

hook 這個單詞的意思是"鉤子"。

react hooks 的意思是，元件盡量寫成純函式，如果需要外部功能和***，就用鉤子把外部**"鉤"進來。 react hooks 就是那些鉤子。

你需要什麼功能，就使用什麼鉤子。react 預設提供了一些常用鉤子，你也可以封裝自己的鉤子。

所有的鉤子都是為函式引入外部功能，所以 react 約定，鉤子一律使用use字首命名，便於識別。你要使用 *** 功能，鉤子就命名為 u***xx。

hook的優點

hook規則

state hook

usestate()用於為函式元件引入狀態（state）。純函式不能有狀態，所以把狀態放在鉤子裡面。

import react,
from
'react'
;function
count()
times<
/p>
>
click me
<
/button>
<
/div>);
}

上面**中，count元件是乙個函式，內部使用usestate()鉤子引入狀態。

usestate()這個函式接受狀態的初始值，作為引數，上例的初始值為0。該函式返回乙個陣列，陣列的第乙個成員是乙個變數（示例**中是count），指向狀態的當前值。第二個成員是乙個函式，用來更新狀態，約定是set字首加上狀態的變數名（示例**中是setcount）。

effect hook

useeffect()用來引入具有***的操作，最常見的就是向伺服器請求資料。以前，放在componentdidmount裡面的**，現在可以放在useeffect()。

useeffect()的用法如下。

useeffect((
)=>
,[dependencies]
)

useeffect()接受兩個引數。第乙個引數是乙個函式，非同步操作的**放在裡面。第二個引數是乙個陣列，用於給出 effect 的依賴項，只要這個陣列發生變化，useeffect()就會執行。第二個引數可以省略，這時每次元件渲染時，就會執行useeffect()。

import react,
from
'react'
;function
example()
times`;}
);return
(you clicked times<
/p>
>
click me
<
/button>
<
/div>);
}

context hook

如果需要在元件之間共享狀態，可以使用usecontext()。

現在有兩個元件 one和 two，我們希望它們之間共享狀態。首先使用 react context api，在元件外部建立乙個 context。

createcontext()

;"root"

const
one=()
=>
=usecontext
;return
(我是第乙個頁面<
/p>
<
/p>
<
/div>);
}

上面**中，usecontext()鉤子函式用來引入 context 物件，從中獲取username屬性。

two 元件的**也類似：

const
two=()
=>
=usecontext
return
(two<
/h1>
我是第二個頁面<
/p>
<
/p>
<
/div>);
}

自定義hook

通過自定義 hook，可以將元件邏輯提取到可重用的函式中。自定義 hook 是乙個函式，其名稱以「use」開頭，函式內部可以呼叫其他的 hook。

示例：

import
from
'react'
;function
usefriendstatus
(friendid)
chatapi.
subscribetofriendstatus
(friendid, handlestatuschange)
;return()
=>;}
);return isonline;
}

React的新特性之Hook

react16的新特性

React初探之React特性

React之jsx語法特性

React的新特性之Hook

react16的新特性

React初探之React特性

React之jsx語法特性

相關推薦