快捷導(dǎo)航

React中常用的Hook有哪些

更新時(shí)間：2023年01月10日 10:16:14 作者：落雪小軒韓

這篇文章主要介紹了react hooks實(shí)現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進(jìn)行綁定，節(jié)后實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

一、簡(jiǎn)介

Hook是React 16.8.0版本增加的新特性/新語(yǔ)法

可以在函數(shù)組件中使用 state 以及其他的 React 特性

二、使用

1、State Hook

（1）State Hook讓函數(shù)組件也可以有state狀態(tài), 并進(jìn)行狀態(tài)數(shù)據(jù)的讀寫(xiě)操作

（2）語(yǔ)法: const [xxx, setXxx] = React.useState(initValue)

（3）useState()說(shuō)明：

參數(shù): 第一次初始化指定的值在內(nèi)部作緩存
返回值: 包含2個(gè)元素的數(shù)組, 第1個(gè)為內(nèi)部當(dāng)前狀態(tài)值, 第2個(gè)為更新?tīng)顟B(tài)值的函數(shù)

（4）setXxx()2種寫(xiě)法:

setXxx(newValue): 參數(shù)為非函數(shù)值, 直接指定新的狀態(tài)值, 內(nèi)部用其覆蓋原來(lái)的狀態(tài)值
setXxx(value => newValue): 參數(shù)為函數(shù), 接收原本的狀態(tài)值, 返回新的狀態(tài)值, 內(nèi)部用其覆蓋原來(lái)的狀態(tài)值

用類(lèi)式組件如下：

export default class Demo extends Component {
	state = {count:0}
	add = () => {
		this.setState(state => ({count: state.count + 1}))
	}
	render() {
		return (
			<div>
				<h2>當(dāng)前求和為：{this.state.count}</h2>
				<button onClick={this.add}>點(diǎn)我加1</button>
			</div>
		)
	}
}

用函數(shù)式組件如下：

export default function Demo() {
	const [count,setCount] = React.useState(0)
	// 其他狀態(tài)也要用同樣的方法
	const [name,setName] = React.useState('Jack')
	function add() {
		// 寫(xiě)法一
		// setCount(count + 1)
		// 寫(xiě)法二
		setCount(count => count + 1)
	}
	return (
		<div>
			<h2>當(dāng)前求和為：{this.state.count}</h2>
			<button onClick={add}>點(diǎn)我加1</button>
		</div>
	)
}

Demo函數(shù)調(diào)用1+n次，每次調(diào)用const [count,setCount] = React.useState(0)都會(huì)執(zhí)行，理論上count的值一直都是0，但實(shí)際上每次點(diǎn)擊按鈕count的值都會(huì)加1。那是因?yàn)?code>React底層做了處理，第一次調(diào)用的時(shí)候就把count的值存下來(lái)了，后續(xù)再調(diào)用函數(shù)的時(shí)候不會(huì)因?yàn)閭魅氲氖?code>0把原來(lái)的值給覆蓋掉。

2、Effect Hook

（1）Effect Hook 可以讓你在函數(shù)組件中執(zhí)行副作用操作(用于模擬類(lèi)組件中的生命周期鉤子)

（2）React中的副作用操作：

發(fā)ajax請(qǐng)求數(shù)據(jù)獲取
設(shè)置訂閱 / 啟動(dòng)定時(shí)器
手動(dòng)更改真實(shí)DOM

（3）語(yǔ)法和說(shuō)明：

useEffect(() => { 
    // 在此可以執(zhí)行任何帶副作用操作
    return () => { // 在組件卸載前執(zhí)行
      // 在此做一些收尾工作, 比如清除定時(shí)器/取消訂閱等
    }
}, [stateValue]) // 如果指定的是[], 回調(diào)函數(shù)只會(huì)在第一次render()后執(zhí)行

（4）可以把 useEffect Hook 看做如下三個(gè)函數(shù)的組合

componentDidMount()
componentDidUpdate()
componentWillUnmount()

用類(lèi)式組件如下：

export default class Demo extends Component {
	state = {count:0}
	add = () => {
		this.setState(state => ({count: state.count + 1}))
	}
	unmount = () => {
		ReactDOM.unmountComponentAtNode(document.getElementById('root'))
	}
	componentDidMount() {
		this.timer = setInterval(() => {
			this.setState(state => ({count:state.count + 1}))
		},1000)
	}
	componentWillUnmount(){
		clearInterval(this.timer)
	}
	render() {
		return (
			<div>
				<h2>當(dāng)前求和為：{this.state.count}</h2>
				<button onClick={this.add}>點(diǎn)我加1</button>
				<button onClick={this.unmount}>卸載組件</button>
			</div>
		)
	}
}

用函數(shù)式組件如下：

export default function Demo() {
	const [count,setCount] = React.useState(0)
	React.useEffect(() => {
		let timer = setInterval(() => {
			setCount(count=> count + 1)
		},1000)
		return () => {
			clearInterval(timer)
		}
	},[])
	function add() {
		setCount(count => count + 1)
	}
	function unmount() {
		ReactDOM.unmountComponentAtNode(document.getElementById('root'))
	}
	return (
		<div>
			<h2>當(dāng)前求和為：{this.state.count}</h2>
			<button onClick={add}>點(diǎn)我加1</button>
			<button onClick={unmount}>卸載組件</button>
		</div>
	)
}

（1）React.useEffect(() => {})，如果第二個(gè)參數(shù)沒(méi)有寫(xiě)，會(huì)監(jiān)測(cè)所有的狀態(tài)，初始化以及每個(gè)狀態(tài)變化的時(shí)候都會(huì)調(diào)用，相當(dāng)于componentDidMount和componentDidUpdate

（2）React.useEffect(() => {},[])，如果第二個(gè)參數(shù)是空數(shù)組，所有的狀態(tài)都不會(huì)監(jiān)測(cè)，執(zhí)行1次（初始化），相當(dāng)于componentDidMount

（3）React.useEffect(() => {},[count])，監(jiān)測(cè)count值，執(zhí)行1+n次（初始化以及count值變化的時(shí)候）

（4）React.useEffect(() => {})中返回一個(gè)函數(shù)，相當(dāng)于componentWillUnmount

3、Ref Hook

（1）Ref Hook可以在函數(shù)組件中存儲(chǔ)/查找組件內(nèi)的標(biāo)簽或任意其它數(shù)據(jù)

（2）語(yǔ)法: const refContainer = useRef()

（3）作用:保存標(biāo)簽對(duì)象,功能與React.createRef()一樣

用類(lèi)式組件如下：

export default class Demo extends Component {
	myRef = React.createRef()
	show = ()=>{
		alert(this.myRef.current.value)
	}
	render() {
		return (
			<div>
				<input type="text" ref={this.myRef}/>
				<button onClick={this.show }>點(diǎn)擊提示數(shù)據(jù)</button>
			</div>
		)
	}
}

用函數(shù)式組件如下：

export default class Demo extends Component {
	const myRef = React.useRef()
	function show() {
		alert(myRef.current.value)
	}
	render() {
		return (
			<div>
				<input type="text" ref={myRef}/>
				<button onClick={show }>點(diǎn)擊提示數(shù)據(jù)</button>
			</div>
		)
	}
}

到此這篇關(guān)于React中常用的Hook有哪些的文章就介紹到這了,更多相關(guān)React Hook內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: