React Hook/Hooks 是什么?
- Hook是 React 16.8.0 版本增加的新特性/新语法
- 可以让你在函数组件中使用 state 以及其他的 React 特性
三个常用的 Hook
State Hook: React.useState()
Effect Hook: React.useEffect()
Ref Hook: React.useRef()
State Hook
- State Hook 让函数组件也可以有 state 状态, 并进行状态数据的读写操作
- 语法:
const [xxx, setXxx] = React.useState(initValue)
- useState()说明
- 参数: 第一次初始化指定的值在内部作缓存
- 返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
- setXxx()2种写法
- setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
- setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值
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>
)
}
export default Demo
Effect Hook
- Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
- React 中的副作用操作:
- 发 ajax 请求数据获取
- 设置订阅 / 启动定时器
- 手动更改真实 DOM
- 语法和说明
useEffect(() => { // 在此可以执行任何带副作用操作 return () => { // 在组件卸载前执行 // 在此做一些收尾工作, 比如清除定时器/取消订阅等 } }, [stateValue]) /* * 第二个参数 * 1. 如果指定的是[], 表示不监听任何状态改变,回调函数只会在第一次render()后执行,也就是 didMount 执行一次 * 2. 如果数组中有值,代表监听数组中的状态改变,只有改变就会执行回调 * */
- 可以把 useEffect Hook 看做如下三个函数的组合
componentDidMount() componentDidUpdate() componentWillUnmount()
function Demo(){
const [count,setCount] = React.useState(0)
React.useEffect(()=>{
let timer = setInterval(()=>{
setCount(count => count+1)
},1000)
return ()=>{
clearInterval(timer)
}
},[])
return (
<div>
<h2>当前求和为:{count}</h2>
</div>
)
}
export default Demo
Ref Hook
- Ref Hook 可以在函数组件中存储/查找组件内的标签或任意其它数据
- 语法:
const refContainer = useRef()
- 作用: 保存标签对象, 功能与
React.createRef()
一样
import React from 'react'
import ReactDOM from 'react-dom'
function Demo(){
const myRef = React.useRef()
//提示输入的回调
function show(){
alert(myRef.current.value)
}
//卸载组件的回调
function unmount(){
ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}
return (
<div>
<input type="text" ref={myRef}/>
<button onClick={unmount}>卸载组件</button>
<button onClick={show}>点我提示数据</button>
</div>
)
}
export default Demo
Comments NOTHING