React Hooks是React 16.8版本后引入的新語法扰肌，借助react hooks，function組件擁有和class組件一樣的能力熊杨，而且在代碼量和執(zhí)行效率上都超越了前者曙旭。
useState
useState()為函數(shù)組件引入了狀態(tài)，接受狀態(tài)的初始值作為參數(shù)晶府，返回一個數(shù)組桂躏，數(shù)組的第一個成員是一個變量(count)，指向狀態(tài)的當前值川陆；第二個成員是一個函數(shù)(setCount)剂习，用來更新狀態(tài)。setCount的接受一個參數(shù)较沪，推薦傳入函數(shù)而不是變量作為參數(shù)鳞绕，可以避免產(chǎn)生不必要bug。如setCount((count) => count + 1)而不是直接setCount(count + 1)
import React, { useState } from 'react'
export default () => {
const [count, setCount] = useState(0)
return (
<div>
<div>Your count:{count}</div>
<button onClick={() => setCount((count) => count + 1)}>Add</button>
</div>
)
}
useEffect
useEffect()是一個函數(shù)尸曼，第一個參數(shù)是回調(diào)函數(shù)们何，第二個參數(shù)可以是state、空或者常量控轿。如果為空冤竹，那么任何state發(fā)生變化時都會執(zhí)行回調(diào)函數(shù)；如果是常量茬射，回調(diào)函數(shù)僅執(zhí)行一次鹦蠕；如果為state，那么只有當這個state發(fā)生變化時才會執(zhí)行回調(diào)函數(shù)在抛。
依賴變化作用
import React, { useState, useEffect } from 'react'
// eslint-disable-next-line import/no-anonymous-default-export
export default () => {
const [count, setCount] = useState(0)
useEffect(() => {
console.log(`You clicked ${count}.`)
})
return (
<div>
<div>Your count:{count}</div>
<button onClick={() => setCount((count) => count + 1)}>Add</button>
</div>
)
}
回調(diào)函數(shù)也可以寫在外面
import React, { useState, useEffect } from 'react'
function log(count) {
console.log(`You clicked ${count}.`)
}
export default () => {
const [count, setCount] = useState(0)
useEffect(log.bind(null, count))
return (
<div>
<div>Your count:{count}</div>
<button onClick={() => setCount((count) => count + 1)}>Add</button>
</div>
)
}
依賴空變化作用
import React, { useState, useEffect } from 'react'
export default () => {
const [count, setCount] = useState(0)
useEffect(() => {
console.log(`You clicked ${count}.`)
}, [])
return (
<div>
<div>Your count:{count}</div>
<button onClick={() => setCount((count) => count + 1)}>Add</button>
</div>
)
}
依賴state作用
import React, { useState, useEffect } from 'react'
export default () => {
const [count, setCount] = useState(0)
useEffect(() => {
console.log(`You clicked ${count}.`)
}, [count])
return (
<div>
<div>Your count:{count}</div>
<button onClick={() => setCount((count) => count + 1)}>Add</button>
</div>
)
}
使用總結(jié)：如果回調(diào)函數(shù)中使用到某個state片部，就在數(shù)組中聲明這個state。
下面看一個定時器的例子
import React, { useState, useEffect } from 'react'
function useInterval(callback, time) {
useEffect(() => {
const I = setInterval(callback, time)
return () => {
clearInterval(I)
}
}, [])
}
export default () => {
const [count, setCount] = useState(0)
useInterval(() => {
// setCount(count + 1)
setCount((count) => count + 1)
}, 1000)
return (
<div>
<div>Your count:{count}</div>
<button onClick={() => setCount((count) => count + 1)}>Add</button>
</div>
)
}
輸出count的值每秒增加1霜定。
