前端 React 讲解之函数组件hook 介绍及用法

class: HOC | render props

hook: 复用状态逻辑

hook 基本原则:

 hook 必须写在 函数组件 不能 class
 hook 必须写在函数的最顶层 不能写 if map for  
 自定义 hook 必须以 use 开头

useState:
const [count, setCount] = useState(0)
const [count, setCount] = useState(() => {
// 简单逻辑
return {
username: ‘小花’,
}
})
setCount(preState => {
return ‘’
})

useEffect:
componentDidMount //加载
componentDidUpdate //卸载
componentWillUnmount //更改
useEffect(() => {
return () => { }
}, [])

//其他hook
useRef
useCallback
useMemo
useContext
useImperativeHandle