hook
hook是 16.8新增特性
作用:让函数组件拥有state,类似生命周期,ref,reduce功能
useState
- 模拟state
useEffect
- 一个参数带return
1. useEffect({}=>{
console.log(“首次渲染与更新”)
return {}=>{console.log(首次卸载)}
})
2. 模拟
componentDidMount
componentDidUpdate
3. return
componentWillUnmount
componentDidupdate - 第二个参数是空数组,return
1. useEffect({}=>{
console.log(“首次渲染与更新”)
return ()=>{console.log(首次卸载)}
},[ ])
2. componentDidMount
3. compomentWillUnmount - 第三个参数是具体的值
1. useEffect({}=>{
console.log(“首次渲染与更新”)
return ()=>{console.log(首次卸载)}
},[num ])
2. 模拟
componentDidMount
componentDidUpdate
(update只对num有用)
3. return
componentDidUpadate
(update只对num有用)
useRef
- const inp=useRef(null)<input ref={inp}/>
- inp.current.value
自定义hooks
- 定义
const[size,setSize]=useState({height:xxx,width:xxx}) - 处理
const onResize=()=>{setSize({width:xxx,height:xxx})}
useEffect(()=>{
监听事件 window.addEventListener(“resize”,onResize)
return 移除监听
()=>window.removeEventListener(“resize”,onResize)
},[]) - 返回return size
- 使用const size=use WInSize()