日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中常用的Hook有哪些_React

作者：落雪小軒韓 ? 更新時間： 2023-02-25 編程語言

一、簡介

Hook是React 16.8.0版本增加的新特性/新語法

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

二、使用

1、State Hook

（1）State Hook讓函數組件也可以有state狀態, 并進行狀態數據的讀寫操作

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

（3）useState()說明：

參數: 第一次初始化指定的值在內部作緩存
返回值: 包含2個元素的數組, 第1個為內部當前狀態值, 第2個為更新狀態值的函數

（4）setXxx()2種寫法:

setXxx(newValue): 參數為非函數值, 直接指定新的狀態值, 內部用其覆蓋原來的狀態值
setXxx(value => newValue): 參數為函數, 接收原本的狀態值, 返回新的狀態值, 內部用其覆蓋原來的狀態值

用類式組件如下：

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

用函數式組件如下：

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

Demo函數調用1+n次，每次調用const [count,setCount] = React.useState(0)都會執行，理論上count的值一直都是0，但實際上每次點擊按鈕count的值都會加1。那是因為React底層做了處理，第一次調用的時候就把count的值存下來了，后續再調用函數的時候不會因為傳入的是0把原來的值給覆蓋掉。

2、Effect Hook

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

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

發ajax請求數據獲取
設置訂閱 / 啟動定時器
手動更改真實DOM

（3）語法和說明：

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

（4）可以把 useEffect Hook 看做如下三個函數的組合

componentDidMount()
componentDidUpdate()
componentWillUnmount()?

用類式組件如下：

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>當前求和為：{this.state.count}</h2>
				<button onClick={this.add}>點我加1</button>
				<button onClick={this.unmount}>卸載組件</button>
			</div>
		)
	}
}

用函數式組件如下：

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>當前求和為：{this.state.count}</h2>
			<button onClick={add}>點我加1</button>
			<button onClick={unmount}>卸載組件</button>
		</div>
	)
}

（1）React.useEffect(() => {})，如果第二個參數沒有寫，會監測所有的狀態，初始化以及每個狀態變化的時候都會調用，相當于componentDidMount和componentDidUpdate

（2）React.useEffect(() => {},[])，如果第二個參數是空數組，所有的狀態都不會監測，執行1次（初始化），相當于componentDidMount

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

（4）React.useEffect(() => {})中返回一個函數，相當于componentWillUnmount

3、Ref Hook

（1）Ref Hook可以在函數組件中存儲/查找組件內的標簽或任意其它數據

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

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

用類式組件如下：

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 }>點擊提示數據</button>
			</div>
		)
	}
}

用函數式組件如下：

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 }>點擊提示數據</button>
			</div>
		)
	}
}

原文鏈接：https://blog.csdn.net/m0_46613429/article/details/128456573

欄目分類
最近更新