react hooks可以使用在函数dom中，由于函数是没有办法像class那样保存state，所以可以用hooks的特性来保存state的状态。
1.useState和useEffect
useState接受一个初始值，并返回一个数值，第一个是你要命名的该值，第二个是需要进行更改该值得时候用的，类似于setState
useEffect相当于componentDidMount而return的部分相当于componentWillUnmount，但也有点不同，该方法接受第一个参数是函数，第二个参数为一个数组，填写当哪个useState的值发生改变的时候，会执行这useEffect里面的内容。填写一个[]则每次之后会加载页面和离开页面的时候执行。
假如这里传入了count，则每次count发生变化都会执行一次useEffect里面的代码。
需要注意的是这里的setCount(c => c + 1) 最好不要变成setCount(count+1),因为填入空数组的时候，只会执行一次useEffect，而这时的count会根据当时函数里面的count来决定是什么。这会引起闭包陷阱。所以最好的办法是使用函数传入count，然后返回一个新的count。
import React, { useState, useEffect } from 'react'
function myTimer() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log(count)
const intenval = setInterval(() => {
setCount(c => c + 1)
}, 1000)
return () => clearInterval(intenval)
}, [])
return <span>{count}</span>
}
export default myTimer
2.useReducer
useReducer类似于useState，当改变的是一个对象之类的，useReducer能使问题变得简单。
useReducer接受一个方法，用来处理需要改变时候返回的state的函数，第二个是初始值。返回的是一个初始值和一个dispacth方法。
然后只需要在改变的时候调用dispatch()传入需要改变的状态和数值即可。由countReducer来进行处理并返回一个新的count即可。
import React, { useState, useReducer, useEffect } from 'react'
// 先声明一个处理的方法
function countReducer(state, action) {
switch (action.type) {
case 'add':
return state + 1
case 'minus':
return state - 1
default:
return state
}
}
function myTimer() {
// const [count, setCount] = useState(0)
const [count, dispatchCount] = useReducer(countReducer, 0)
useEffect(() => {
const intenval = setInterval(() => {
// setCount(c=>c+1)
dispatchCount({ type: 'add' })
}, 1000)
return () => {
console.log('didmount')
return clearInterval(intenval)
}
}, [])
return <span>{count}</span>
}
export default myTimer
3.uselayoutEffect
这个和useEffect有点相似，但这个是在Dom还没渲染完成的时候执行，而useEffect是在渲染之后执行的。
一般进行更改某些变量或者动画都应该在渲染之后再进行执行，所以这个使用得不是很多。
4.useContext
类似于在全局当中定义一个变量。方便祖先组件与后代组件（中间隔了好多层组件）传值。
首先需要使用React.CreateContext()，将其封装成一个组件导出。
import React from 'react'
export default React.createContext('')
然后在父组件中引入该组件。使用其提供的Provider组件将子组件包裹在一起。而value值就是需要传给子组件的值了。这里的value可以用this.state.xxx来代替，当发生改变的时候，子组件获取到该值也会发生改变。
<MyContext.Provider value="text" >
<Component {...pageProps} />
</MyContext.Provider>
在子组件中，就可以通过useContext(context component)来获取了，需要注意的是，必须是functional component，不然会报错。
通过useContext获取到的值就是上面包裹的value的值
import React, { useState, useReducer, useEffect, useContext } from 'react'
import MyContext from '../lib/my-context'
function myTimer() {
const context = useContext(MyContext)
const [count, dispatchCount] = useReducer(countReducer, 0)
useEffect(() => {
const intenval = setInterval(() => {
// setCount(c=>c+1)
dispatchCount({ type: 'add' })
}, 1000)
return () => {
console.log('didmount')
return clearInterval(intenval)
}
}, [])
return (
<span>
{count}
{context}
</span>
)
}
5.useRef
由于在函数组件中是不存在ref的。所以假如需要给函数组件里面拥有ref，就需要使用useRef了。
使用方法也很简单，useRef()返回的就是一个ref，只需要将其放在想要获取的dom上即可。
import React, {useState, useReducer, useEffect, useContext, useRef} from 'react'
function myTimer() {
const [count, dispatchCount] = useReducer(countReducer, 0)
const context = useContext(MyContext)
const spanRef = useRef()
console.log(spanRef)
return (
<span ref={spanRef}>
{count}
{context}
</span>
)
}
6.useMeme,useCallback
主要是用于优化性能的。某些组件没有更新的时候，不需要进行更新操作，就可以用到这两个了。
首先我们将代码更改一下,加入了一个Child的函数组件，Child中接受两个参数，一个是button事件，用来更改count的值，一个是显示count的值，input用来更改name的值。然后在Child中console一下，记录每次Child更新的时间点。
function myCount() {
const [name, setName] = useState('yiki')
const [count, dispatchCount] = useReducer(countReducer, 0)
const config = {
text: `count is ${count}`,
color: count > 3 ? 'red' : 'blue'
}
return (
<div>
<input value={name} onChange={e => setName(e.target.value)}></input>
<Child
onButtonClick={() => dispatchCount({ type: 'add' })}
config={config}
></Child>
</div>
)
}
function Child({ onButtonClick, config }) {
console.log('child render')
return (
<button onClick={onButtonClick} style={{ color: config.color }}>
{config.text}
</button>
)
}
export default myTimer
可以发现，当每次input输入改变的时候，都会打印出child render。而这不是我们想要的。因为count并没有发生改变。Child组件是不需要发生改变的。这时候我们就需要用到useMemo和memo了。
memo类似于class里面的shouldComponentUpdate，可以包裹在函数组件本身。由于该组件完全取决于onButtonClick和config，所以只要这两个数值不发生改变，那么Child组件就不会发生改变。
import { memo } from 'react'
const Child = memo(function Child({ onButtonClick, config }) {
console.log('child render')
return (
<button onClick={onButtonClick} style={{ color: config.color }}>
{config.text}
</button>
)
})
但是，当这样写完之后，会发现Child还是会发生改变，这是由于input会导致name发生改变，而name的改变会导致myCount组件也发生改变。而myCount一改变，config就会被重新声明。引用的地址就会改变，所以这时候Child还是会被重新渲染。
这时候就需要用到useMemo了。useMemo来判断config是否改变，从而判断是否要返回一个新的对象，这时候我们对config的声明做一下修改。
import { useMemo } from 'react'
const config = useMemo(
() => ({
text: `count is ${count}`,
color: count > 3 ? 'red' : 'blue'
}),
[count]
)
第一个参数是一个方法，返回一个值，第二个参数和useEffect一样，根据该值来判断是否需要返回一个新的值。
但这时候还是不行，输入input的时候，Child还是渲染了。这是因为onButtonClick={() => dispatchCount({ type: 'add' })}传入的是一个匿名函数，每次myCount更新的时候地址也会改变。
这时候可以用useMemo返回一个函数，或者用useCallback来进行返回一个函数。第二个参数也是依赖项，根据某个值来判断是否要更新。
import { useCallback } from 'react'
const handleButtonClick = useCallback(
() => dispatchCount({ type: 'add' }),
[]
)
假如使用useMemo就需要多包裹一层用来返回一个函数
const handleButtonClick = useMemo(
() => () => dispatchCount({ type: 'add' }),
[]
)
自此当input值发生改变的时候Child就不会重新渲染，只有当count的值发生改变的时候才会进行重新渲染，完成了对Child的性能优化了。
7.闭包陷阱
由于是函数组件，所以很容易出现闭包的情况，当我们使用setTimeout来进行延时调用来获取某值的时候，而该值在延时的时候发生了改变，但是setTimeout获取到的其实是没有改变的当时的值。
function MyCount(){
const [count,setCount] = useState(0)
return <>
<button onClick={() => {setCount(c=>c+1)}}>{count}</button>
<button onClick={()=>{setTimeout(()=>{alert(count)},2000)}}>延时获取count</button>
</>
}
点击延时后，再在2秒内点击button2次，这时候弹出的值应该是2，但是由于闭包的关系，所以弹出来的是0。由于我们在使用class的时候，是通过this.state.count来进行获取的，所以不会出现这个问题。但是在函数中，往往很容易就会出现和现实不符的情况。
这时候可以通过useRef来进行解决。由于useRef返回的都是同一个对象，所以可以将其值挂载到ref.current上，这样就能获取到最新的值了。
这时候我们可以改成这种如下形式：
function MyCount(){
const [count,setCount] = useState(0)
const countRef = useRef()
countRef.current = count
return <>
<button onClick={() => {setCount(c=>c+1)}}>{count}</button>
<button onClick={()=>{setTimeout(()=>{alert(countRef.current)},2000)}}>延时获取count</button>
</>
}
网友评论