1、Hook是React 16.8.0版本增加的新特性/新语法
2、可以让你在函数组件中使用 state 以及其他的 React 特性
介绍: State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
语法: const [xxx, setXxx] = React.useState(initValue)
function Demo() {
const [count, setCount] = React.useState(0)
// 加的回调
function add () {
// setCount(count+1) // 第一种写法
setCount(count => count+1)
}
return (
<div>
<h2>当前求和为:{count}</h2>
<button onClick={add}>点我+1</button>
</div>
)
}
介绍: Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子-componentDidMount()
-componentDidUpdate()
-componentWillUnmount()
)
语法:
useEffect(() => {
// 在此可以执行任何带副作用操作
return () => { // 在组件卸载前执行
// 在此做一些收尾工作, 比如清除定时器/取消订阅等
}
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行
React.useEffect(()=> {
let timer = setInterval(()=> {
setCount(count => count+1)
}, 2000)
return () => {
clearInterval(timer)
}
}, [])
介绍: Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据(类似于React.createRef()
)
语法: const refContainer = useRef()
function Demo() {
const myRef = React.useRef()
// 提示输入的回调
function show() {
console.log(myRef.current.value)
}
return (
<div>
<input ref={myRef} type="text" />
<button onClick={show}>点击提示数据</button>
</div>
)
}
root.unmount()