React函式式元件值之useState

react hooks 是 react 16.8 的新增特性。它可以讓我們在函式元件中使用 state 、生命週期以及其他 react 特性，而不僅限於 class 元件。react hooks 的出現，標示著 react 中不會在存在無狀態元件了，只有類元件和函式元件。

狀態是隱藏在元件中的資訊，元件可以在父元件不知道的情況下修改其狀態。相比類元件，函式元件足夠簡單，要使函式元件具有狀態管理，可以usestate() hook。

定義乙個state，以及更新 state 的函式。在初始渲染期間，返回的狀態 (state) 與傳入的第乙個引數 (initialstate) 值相同。setstate 函式用於更新 state。它接收乙個新的 state 值並將元件的一次重新渲染加入佇列。在後續的重新渲染中，usestate 返回的第乙個值將始終是更新後最新的 state。

1 const [state, setstate] =usestate(initialstate);
2 setstate(newstate);

例子：

1
function
2 const [ count, setcount ] = usestate(0)
3return(4
5點選次數: 
6}>點我78
)9 }

當我們在使用 usestate 時，修改值時傳入同樣的值，元件不會重新渲染，這點和類元件setstate保持一致。

usestate 支援我們在呼叫的時候直接傳入乙個值，來指定 state 的預設值，比如這樣 usestate(0), usestate(), usestate([ 1, 2 ])，還支援我們傳入乙個函式，來通過邏輯計算出預設值，比如這樣

1
function
2 const [ count, setcount ] = usestate(() =>)
5return(6
7點選次數: 
8}>點我910
)11 }

usestate 中的函式只會在初始化的時候執行一次。

如果新的 state 需要通過使用先前的 state 計算得出，那麼可以將函式傳遞給 setstate。該函式將接收先前的 state，並返回乙個更新後的值。下面的計數器元件示例展示了 setstate 的兩種用法：

1
function
counter() 
6function
handleclickfn() )10}
11return(12
<>
13count: 14+
15+1617
);18 }

handleclick和handleclickfn乙個是通過乙個新的 state 值更新，乙個是通過函式式更新返回新的 state。現在這兩種寫法沒有任何區別，但是如果是非同步更新的話，區別就顯現出來了。

1
function
counter() , 3000);7}
8function
handleclickfn() )
13 }, 3000);14}
15return(16
<>
17count: 18+
19+2021
);22 }

當設定為非同步更新，點選按鈕延遲到3s之後去呼叫setcount函式，當快速點選按鈕時，也就是說在3s多次去觸發更新，但是只有一次生效，因為 count 的值是沒有變化的。而當使用函式式更新 state 的時候，這種問題就沒有了，因為它可以獲取之前的 state 值，也就是**中的 prevcount 每次都是最新的值。

其實這個特點和類元件中 setstate 類似，可以接收乙個新的 state 值更新，也可以函式式更新。如果新的 state 需要通過使用先前的 state 計算得出，那麼就要使用函式式更新。因為setstate更新可能是非同步，當你在事件繫結中操作 state 的時候，setstate更新就是非同步的。

一般操作state，因為涉及到 state 的狀態合併，react 認為當你在事件繫結中操作 state 是非常頻繁的，所以為了節約效能 react 會把多次 setstate 進行合併為一次，最後在一次性的更新 state，而定時器裡面操作 state 是不會把多次合併為一次更新的。

在 react 應用中，當某個元件的狀態發生變化時，它會以該元件為根，重新渲染整個元件子樹。

1
function
child() 5)
6}78
function
9 const [number, setnumber] = usestate(0)
10 const [name, setname] = usestate('hello') //
表單的值
11 const addclick = () => setnumber(number + 1)
12 const data =
13return(14
15setname(e.target.value)} />
161718)
19 }

上述**中，子元件引用了number相關資料，但是當name相關資料發生變化，也會重繪整個元件，子元件雖然沒有任何變化，也會重繪。為了避免不必要的子元件的重渲染，需要使用usememo和usecallback的hook。

1
function
child() 5)
6}78 child =memo(child)910
function
11 const [number, setnumber] = usestate(0)
12 const [name, setname] = usestate('hello') //
表單的值
13 const addclick = usecallback(() => setnumber(number + 1), [number])
14 const data = usememo(() =>(), [number])
15return(16
17setname(e.target.value)} />
181920)
21}22

把「建立」函式和依賴項陣列作為引數傳入 usememo，它僅會在某個依賴項改變時才重新計算 memoized 值。這種優化有助於避免在每次渲染時都進行高開銷的計算。如果沒有提供依賴項陣列，usememo 在每次渲染時都會計算新的值。

usecallback返回乙個 memoized **函式。usecallback(fn, deps) 相當於 usememo(() => fn, deps)。

usecallback 和 usememo 引數相同，第乙個引數是函式，第二個引數是依賴項的陣列。主要區別是 react.usememo 將呼叫 fn 函式並返回其結果，而 react.usecallback 將返回 fn 函式而不呼叫它。

React函式式元件值之useState

React 4 函式式元件

react父子元件傳值 react元件通訊

React元件傳值

React函式式元件值之useState

React 4 函式式元件

react父子元件傳值 react元件通訊

React元件傳值

相關推薦