<>hooks The role of
*
It changed the original React How to develop classes , Function form was used instead ; It changes the complex form of state operation , Make it easier for programmers to use ; It changes the reusability of a state component , Greatly increase the reusability of components .
<>useState
// Declaration status const [ count , setCount ] = useState(0); // Usage status <p>You clicked
{count} times</p> <button onClick={()=>{setCount(count+1)}}>click me</button>
<>useEffect
<> One parameter
useEffect(()=>{ console.log(" First render and update ") })
* simulation :
componentDidMount componentDidUpdate
<> A parameter band return
useEffect(()=>{ console.log(" First render and update ") return ()=>{console.log( First uninstall )} })
* simulation :
componentDidMount
componentDidUpdate
* return
componetWillUnmount
componentDidUpdate
<> The second parameter is an empty array ,return
useEffect(()=>{ console.log(" First render and update ") return ()=>{console.log( First uninstall )} },[])
* Relative to life cycle componentDidMount and componetWillUnmount
<> The second parameter is the specific value
useEffect(()=>{ console.log(" First render and update ") return ()=>{console.log( First uninstall )} },[num])
*
simulation
componentDidMount
componentDidUpdate(update Only right num Useful )
*
return
componetWillUnmount
componentDidUpdate(update Only right num Useful )
<>useRef
const inp = useRef(null) <input ref={inp}> // call inp.current.value
<> custom hook
*
definition ：const [size,setSize] = useState({height:xxx,width:xxx})
*
handle ：
const onResize = ()=>{setSize({width:xxx,height:xxx})}
useEffect(()=>{
Monitoring events window.addEventListener(“resize”,onResize)
return Remove listening ()=>window.removeEventListener(“resize”,onResize)
},[])
*
return return size
*
use const size = useWinSize()
Technology