React Hooks是React 16.8版本后引入的新语法，借助react hooks，function组件拥有和class组件一样的能力，而且在代码量和执行效率上都超越了前者。
useState
useState()为函数组件引入了状态，接受状态的初始值作为参数，返回一个数组，数组的第一个成员是一个变量(count)，指向状态的当前值；第二个成员是一个函数(setCount)，用来更新状态。setCount的接受一个参数，推荐传入函数而不是变量作为参数，可以避免产生不必要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()是一个函数，第一个参数是回调函数，第二个参数可以是state、空或者常量。如果为空，那么任何state发生变化时都会执行回调函数；如果是常量，回调函数仅执行一次；如果为state，那么只有当这个state发生变化时才会执行回调函数。
依赖变化作用
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>
)
}
回调函数也可以写在外面
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>
)
}
使用总结：如果回调函数中使用到某个state，就在数组中声明这个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。
