为什么要有hook
函数组件比类组件有本身的优势（比如性能更好）但是函数组件中没有自己的状态，需要通过props传入，为了使函数组件能有自己的状态和进行有副作用的操作，所以就有了hook
hook的用法
useState
import { useState } from 'react'
function App() {
const [num, setNum] = useState(0)
return (
<>
<h2>{num}</h2>
<button onClick={() => setNum(num++)}></button>
</>
)
}
// num ---> 值
// setNum ---> 改变值的方法 参数为改变后的值 如： setNum(num++)
// useState 参数为num的初始值，此处为0
useEffect
个人理解useEffect和之前的钩子函数有着相似的作用，一些有副作用的操作可以在useEffect进行，例如请求数据
import { useEffect } from 'react'
function App() {
useEffect(() => {
document.title = '奥利给'
})
return (
<>
<h2>hello</h2>
</>
)
}
useContext
和class组件的context作用相同，写法简单很多
import React, { useContext } from 'react'
const DemoContext = React.createContext('hello') // --> 参数为DemoContext的初始值
function App() {
return (
<DemoContext.provider value="hi"> // --> 设置初始值
<Child></Child>
</DemoContext.provider>
)
}
function Child() {
const sayWords = useContext(DemoContext)
return (
<h2>{sayWords}</h2> // --> 此处的sayWords即为根组件中传入的DemoContext的值
)
}
useReducer
reducer个redux中使用的reducer用法类似
import { useReducer } from 'react'
const initState = { num: 0 }
function reducer(state, action) {
switch(action.type) {
case 'increment':
return { num: state.num + 1 }
case 'decrement':
return { num: state.num -1 }
default:
return state
}
}
function App() {
const [ state, dispatch ] = useReducer(reducer, initState ) // --> ([reducer], [初始值])
return (
<>
<h2>{state.num}</h2>
<button onClick={dispatch({type: 'increment'})}>++++++</button>
<button onClick={dispatch({type: 'decrement'})}>------</button>
</>
)
}
