useState
React.useState 让函数组件也可以有state状态,并进行状态数据的读写操作
React.useState(0) 返回一个数组,里面有两个属性 第一个是状态初始值 第二个是改变初始值的方法
使用:
// 数组的解构赋值按照顺序就行 不用像对象解构赋值那样一定要名字一样
const [count,setCount] = React.useState(0)
const [name,cahngeName] = React.useState('tom')
使用第二个参数(回调函数)
function changName(){
cahngeName((name)=> name='jack')
}
dom层调用
<h2 className='title'>当前名字为:{name}</h2>
<button onClick={changName}>换名</button>
useEffect
React.useEffect 执行副作用操作,用于模拟类组件的生命周期钩子
第一个参数是个回调函数。
第二个参数不写。表示监测所有的状态,无论哪个状态更新,第一个参数回调都会再执行的。
第二个参数写空数组。表示所有状态都不监测。第一个参数函数只执行1次(即组件挂载完毕后执行1次)。
第二个参数写有值的数组。表示第一个参数回调执行 1+n 次,1表示组件挂载完毕,n表示数组里要监测的状态更新时第一个参数回调又要执行次数
如果第一个参数函数return一个函数,那么返回的这个函数就是在组件销毁前执行。执行时机相当于类组件的componentWillUnmount生命周期钩子
一个具有注脚的文本。
可以把 useEffect Hook 看做如下 三个生命周期钩子的组合
componentDidMount() 组件挂载完毕
componentDidUpdate() 状态更新后
componentWillUnmount() 组件将要销毁
React.useEffect(()=>{
// 在此可以执行任何带副作用的操作(比如数据交互,启动定时器,手动更改真实dom)
let timer = setInterval(()=>{
setCount((count)=>{return count+1})
},2000)
return ()=>{// return 的函数在组件卸载前执行
// 在此做一些收尾工作,比如清除定时器/取消订阅
clearInterval(timer)
}
},[])
useRef
React.useRef() 调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器只能存储一个节点
作用:保存标签对象节点,功能与React.createRef一样
const myref = React.useRef()
function show(){
console.log(myref.current.value);
}```
return (
<>
<input type="text" ref={myref}/>
<button onClick={destroy}>卸载组件</button>
<button onClick={show}>提示input的ref信息</button>
</>
)