请问React Hooks怎么使用?
有没有比入门的教程
网友回复
hooks的出现改变了原始的React类的开发方式,改用了函数形式;它改变了复杂的状态操作形式,让程序员用起来更轻松;它改变了一个状态组件的复用性,让组件的复用性大大增加。主要有以下几种hooks
一、useState// 声明状态 const [ count , setCount ] = useState(0); // 使用状态 <p>You clicked {count} times</p> <buttonBfwOnClick={()=>{setCount(count+1)}}>click me</button>
二、useEffect
一个参数useEffect(()=>{ console.log("首次渲染与更新") })
模拟:
componentDidMount componentDidUpdate 一个参数带returnuseEffect(()=>{ console.log("首次渲染与更新") return ()=>{console.log(首次卸载)} })
模拟:
componentDidMount componentDidUpdate return componetWillUnmountcomponentDidUpdate
第二个参数是空数组,returnuseEffect(()=>{ console.log("首次渲染与更新") return ()=>{console.log(首次卸载)} },[])相对于生命周期的componentDidMount和componetWillUnmount 第二个参数是具体的值
useEffect(()=>{ console.log("首次渲染与更新") return ()=>{console.log(首次卸载)} },[num])模拟 componentDidMount componentDidUpdate(update只对num有用) return componetWillUnmount
componentDidUpdate(update只对num有用)
三、useRef
const inp = useRef(null) <input ref={inp}>//调用
inp.current.value
四、自定义hook 定义:const [size,setSize] = useState({height:xxx,width:xxx}) 处理: constBfwOnResize= ()=>{setSize({width:xxx,height:xxx})}useEffect(()=>{
监听事件 window.addEventListener(“resize”,onResize)
return 移除监听()=>window.removeEventListener(“resize”,onResize)},[])
返回 return size 使用 const size = useWinSize()