文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React中常用的Hook有哪些

2023-01-10 12:02

关注

一、简介

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(() => {}),如果第二个参数没有写,会监测所有的状态,初始化以及每个状态变化的时候都会调用,相当于componentDidMountcomponentDidUpdate

(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>
		)
	}
}

到此这篇关于React中常用的Hook有哪些的文章就介绍到这了,更多相关React Hook内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯