脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Hook

React中常用的Hook有哪些

 更新时间：2023年01月10日 10:16:14   作者：落雪小轩韩  
这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定，节后实例代码给大家介绍的非常详细，需要的朋友可以参考下

一、简介

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

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

您可能感兴趣的文章:

相关文章

  • React.js入门学习第一篇

    React.js入门学习第一篇

    这篇文章主要为大家介绍了React.js入门学习第一篇，详细解析React.js基础知识，全方位的了解React.js，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • React中useState和useEffect的用法详解

    React中useState和useEffect的用法详解

    Hooks 发布之后，函数组件能拥有自己的 state，React提供了很多内置的Hooks，这篇文章就来和大家介绍一下useState 和 useEffect的使用，需要的可以参考一下
    2023-06-06
  • React如何优雅的捕获异常

    React如何优雅的捕获异常

    捕获异常是来定位你错误代码的。本文主要介绍了 React如何捕获异常，你知道多少种方法，ErrorBoundary，ErrorBoundary-try-catch等等。本文就来详细的介绍一下
    2021-06-06
  • React使用Mobx6.x共享状态问题

    React使用Mobx6.x共享状态问题

    这篇文章主要介绍了React使用Mobx6.x共享状态问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • React中key属性的警告及解决方案

    React中key属性的警告及解决方案

    在使用 React 进行开发时,key 属性是一个至关重要的概念,尤其在渲染列表时,开发者在使用 key 属性时,常常会遇到各种警告信息,本文将详细解析这些警告的原因,提供有效的解决方案,并总结最佳实践,需要的朋友可以参考下
    2024-12-12
  • TS装饰器bindThis优雅实现React类组件中this绑定

    TS装饰器bindThis优雅实现React类组件中this绑定

    这篇文章主要为大家介绍了TS装饰器bindThis优雅实现React类组件中this绑定，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 解决React报错React Hook useEffect has a missing dependency

    解决React报错React Hook useEffect has a missing dependency

    这篇文章主要为大家介绍了解决React报错React Hook useEffect has a missing dependency，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • React中组件的this.state和setState的区别

    React中组件的this.state和setState的区别

    在React开发中,this.state用于初始化和读取组件状态,而setState()用于安全地更新状态,正确使用这两者对于管理React组件状态至关重要,避免性能问题和常见错误
    2024-09-09
  • 详解React 16 中的异常处理

    详解React 16 中的异常处理

    这篇文章主要介绍了详解React 16 中的异常处理的相关资料,React 16.x 版本中，引入了所谓 Error Boundary 的概念，从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃；未被任何异常边界捕获的异常可能会导致整个 React 组件树被卸载，需要的朋友可以参考下
    2017-07-07
  • react 实现表格列表拖拽排序的示例

    react 实现表格列表拖拽排序的示例

    本文主要介绍了react 实现表格列表拖拽排序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02

最新评论