React中什么是hook?
在react中,hook是React16.8新增的特性,用于在不编写class的情况下使用state及其他的react特性;可以用函数组件去使用react中的一些特性,也可以让函数组件也拥有状态,通过自定义hook实现在组件间公用状态操作。
1.useState()
语法:
const [valueName,setValue]=useState(initValue);
initValue:状态初始化值
valueName:状态值
setValue:状态更新函数
注意:useState的状态更新函数和类式组件中setState()不同,此函数会覆盖原状态值
import React,{
useState}from 'react'
export default function Demo() {
const [name,setName]=useState("zhangsan");
const changeName=()=>{
setName("lisi")
}
return (
<Fragment>
<div>{
name}</div>
<button onClick={
changeName}></button>
</Fragment>
)
}
2.useEffect()
Effect Hook 在函数式组件中可以模拟三个钩子:componentDidMount
、componentDidUpdate
、componentWillUnmount
语法:
useEffect(()=>{
return()=>{
//组件卸载前执行,即componentWillUnmount钩子
}
},[stateValue])
-
第一个参数
return
的函数相当于componentWillUnmount
-
第二个参数数组为空,表示不监听任何状态的更新,只有在页面首次渲染时会执行输出,相当于
componentDidMount
-
第二个参数数组写上状态,表示只监听这些状态的更新,相当于
componentDidUpdate
import React,{ useEffect} from 'react' import PubSub from "pubsub-js" export default function Demo() { const [age,setValue]=useEffect(22); const setAge=(msg,data)=>{ setValue(data) } useEffect(()=>{ //消息订阅 PubSub.subscribe("age",setAge); return()=>{ //取消订阅 PubSub.unsubscribe("age"); } },[]) return ( <div>{ age}</div> ) }
3.useRef()
-
Ref Hook
可以在函数式组件存储或查找组件内的标签或其他数据 -
保存标签对象的容器,和
React.createRef()
类似,也是专人专用import React,{ useRef} from 'react' function Demo() { const input1 = useRef() function show() { alert(input1.current.value) } return ( <div> <input type="text" ref={ input1} /> <button onClick={ show}>点击</button> </div> ) }