脚本宝典收集整理的这篇文章主要介绍了React中的那些Hook的使用,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特,Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class 。
useState
可以为函数组件提供状态 当我们想要在函数组件中,使用组件状态时,就要使用 useState 这个Hook 了
import {useState} from 'react'
useState
函数,传入初始值,返回状态
和修改状态的函数
function App = ()=>{
//调用useState传入初始值0 他返回的是一个数组
const stateArr = useState(0)
//第一个元素是我们定义的初始状态
const state = stateArr [0]
//第二个元素是修改状态的函数
const setState = stateArr [1]
}
我们一般用结构的方法直接定义:
function App = ()=>{
//调用useState传入初始值0 他返回的是一个数组
//第一个元素是我们定义的初始状态,第二个元素是修改状态的函数
const [state,setState ] = useState(0)
}
把 state显示在页面上 点击按钮让他+1
import { useState } from 'react'
// useState 是hook,hook是use开头的函数
const Count = () => {
const [state,setState ] = useState(0)
return (
<div>
//展示状态值
<h1>useState Hook -> {state}</h1>
//点击按钮,让状态值 +1
<button onClick={() => setState(state + 1)}>+1</button>
</div>
)
}
useState
唯一的参数就是初始 state。在上面的例子中,我们的计数器是从零开始的,所以初始 state 就是 0。 它可以是任意值(比如,数值、字符串等)useState
以前我们可能把它们叫做“无状态组件”。但现在我们为它们引入了使用 React state 的能力,所以我们更喜欢叫它”函数组件”
Effect Hook 可以让我们在函数组件中执行副作用操作
如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
副作用:
执行时机:
import { useEffect } from 'react'
useEffect(() => {
console.log('useEffect 1 执行了,可以做副作用')
})
useEffect(() => {
console.log('useEffect 2 执行了,可以做副作用')
})
我们先了解useEffect里的其他参数
useEffect(() => {
// 副作用函数的内容
return 副作用函数的返回值
}, [])
副作用函数的返回值是可选的,可省略。也可以返回一个清理函数,用来清理副作用
useEffect(() => {
// 副作用函数的内容
return ()=>{ /* 做清理工作*/ } // 清理函数
}, [])
参数1: 副作用函数。
参数2:执行副作用函数的依赖项:它决定了什么时机执行参数1(副作用函数)
useEffect(() => {
console.log('useEffect 1 执行了,可以做副作用')
})
执行时机:挂载时执行一次 ,每次更新之后都要执行
useEffect(() => {
// 副作用函数的内容
}, [])
执行时机:只挂载时执行第一次 使用场景:
useEffect(() => {
// 副作用函数的内容
}, [依赖项1,依赖项2,....])
执行时机:
这里的依赖项就是组件中定义的状态。
useEffect(() => {
return () => {
// 副作用函数的清理函数
}, [])
模拟componentWillUnMount
执行时机: 组件卸载时执行
还有其他几个使用频率稍低的Hook函数 我有时间加上
以上是脚本宝典为你收集整理的React中的那些Hook的使用全部内容,希望文章能够帮你解决React中的那些Hook的使用所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。