State Hook
- State Hook让函数组件也可以有state状态,并进行状态的读写操作
- 语法:const [xxx, setXxx] = React.useState(initValue)
- useState()说明
- 参数:第一次初始化指定的值,并且会做缓存
- 返回值:包含两个元素的数组,第一个为你内部当前状态值,第2个位更新这个状态的函数
- setXxx()的两种写法
- setXxx(newVal):参数为非函数子,直接指定新的状态值,内部用这个值覆盖原来的状态值
- setXxx(value => newVal):参数为函数,接收原本的状态值,返回新的状态值,内部用新的状态值覆盖原来的状态值
Effect Hook
- Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件的生命周期狗子)
- React中的副作用操作:
- 发ajax请求数据获取
- 设置订阅、启动定时器
- 手动修改真实DOM
- 可以把Effect Hook看做如下三个函数的组合
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
Ref Hook
- Ref Hook 可以在函数组件中存储、查找组件内的标签或任意其他数据
- 语法:const refContainer = useRef()
- 作用:保存标签对象,功能和React.creatRef()一样
function Demo() {
const [count, setCount] = React.useState(initValue)
const myRef = useRef()
React.useEffect(() => {
console.log(1111111111)
let timer = setInterval(() => {
setCount(count+1)
},500)
// 这个返回值相当于卸载组件触发的函数,可以用于组件卸载前的执行操作
return () => {
clearInterval(timer)
}
// },[]) // 这个传一个空数组的话,就是谁也不检测,如果不传,就是谁都检测
// })
},[count])
// 加的回调函数
function add() {
setCount(count+1) // 第一种写法
setCount(count => count + 1) // 第二种写法
}
// show回调函数
function show() {
alert(myRef.current.value)
}
// 卸载组件的回调
function unmount() {
ReactDOM.unmountComponentsAtNode(doucment.getElementById('root'))
}
return (
<div>
<input ref={myRef} />
<div>和为:{count}</div>
<button onClick={add}>点我加1</button>
<button onClick={unmount}>卸载组件</button>
<button onClick={show}>点我显示提示数据</button>
</div>
)
}