react函数式组件中hook之useState、useEffect、useRef的基本使用
目录
一.useState
作用：
用法：
代码示例：
二.useEffect
作用：
用法：
代码示例：
三.useRef
作用：
用法：
代码示例：
前言：路过的朋友们欢迎点个赞吧，一生好运带回家。
一.useState
作用：
函数组件定义状态值
用法：
（1）首先引入useState
import { useState } from 'react'（2）函数内进行定义
const [状态值，修改状态的方法名] = useState(初始值)注意：修改状态的方法名是自己定义的，方法名一般起名为set状态值
代码示例：
import React, { useState } from 'react'
export default function Demo() {
const [userName, setUserName] = useState('老王') // 初始值
function btn() {
// setUserName('老李') // 第一种写法：方法内直接写改变之后的状态值
setUserName(()=>'老李') // 第二种写法：用回调的形式，返回值写改变之后的状态值，react帮你调用
}
return (
用户名: {userName}
)
}二.useEffect
作用：
可以模拟类组件的生命周期（componentDidMount挂载、componentDidUpdate更新 和 componentWillUnmoun卸载）
用法：
（1）首先引入useEffect
import React, {useEffect, useState } from 'react'（2）具体用法有四种情况
-
第一种，第一个参数是一个回调，第二个参数可以不写
页面一打开调用和更新时调用(相当于调用了componentDidMount 和 componentDidUpdate)
// 1. 第一种，第一个参数是一个回调，第二个参数可以不写
useEffect(() => {
console.log(sum); // 页面一打开和更新时调用(相当于调用了componentDidMount 和 componentDidUpdate)
})-
第二种，第一个参数是一个回调，第二个参数是一个空数组
页面一打开只调用一次(相当于调用了componentDidMount)
// 2. 第二种，第一个参数是一个回调，第二个参数是一个空数组
useEffect(()=> {
console.log(sum); // 页面一打开只调用一次(相当于调用了componentDidMount)
},[])-
第三种，第一个参数是一个回调，第二个参数是一个数组，可以传入一个或者多个变量进行监测
页面一打开调用和数组中传入的变量更新时调用(相当于调用了componentDidMount 和 componentDidUpdate)
useEffect(() => {
console.log(sum);
console.log(age); // 页面一打开调用和数组中传入的变量更新时调用(相当于调用了componentDidMount 和 componentDidUpdate)
}, [age])- 第四种，第一个参数是一个回调，回调的返回值也是一个函数
页面或者组件或者标签卸载时进行调用(相当于调用了componentWillUnmount)，经常用于清除定时器等
// 卸载组件的点击事件
function unMount() {
root.unmount() // 引入root
}
// 4. 第四种，第一个参数是一个回调，回调的返回值也是一个函数
useEffect(() => {
// 开启定时器 自动+1
let timerId = setInterval(() => {
setHe(he + 1)
}, 1000)
// 返回一个函数，在里面清除定时器
return function stop() { // 页面或者组件或者标签卸载时进行调用(相当于调用了componentWillUnmount)
clearInterval(timerId)
}
})
代码示例：
import React, { useEffect, useState } from 'react'
import root from '../../index'
export default function Demo() {
const [sum, setSum] = useState(0) // 初始值
const [age, setAge] = useState(18) // 初始值
const [he, setHe] = useState(0) // 初始值
function btn() {
setSum(sum + 1)
}
function btnAge() {
setAge(() => age + 5)
}
// 卸载组件的点击事件
function unMount() {
root.unmount() // 引入root
}
// // 1. 第一种，第一个参数是一个回调，第二个参数可以不写
// useEffect(() => {
// console.log(sum); // 页面一打开调用和更新时调用(相当于调用了componentDidMount 和 componentDidUpdate)
// })
// 2. 第二种，第一个参数是一个回调，第二个参数是一个空数组
// useEffect(()=> {
// console.log(sum); // 页面一打开只调用一次(相当于调用了componentDidMount)
// },[])
// 3.第三种，第一个参数是一个回调，第二个参数是一个数组，可以传入一个或者多个变量进行监测
// useEffect(() => {
// console.log(sum);
// console.log(age); // 页面一打开调用和数组中传入的变量更新时调用(相当于调用了componentDidMount 和 componentDidUpdate)
// }, [age])
// 4. 第四种，第一个参数是一个回调，回调的返回值也是一个函数
useEffect(() => {
// 开启定时器 自动+1
let timerId = setInterval(() => {
setHe(he + 1)
}, 1000)
// 返回一个函数，在里面清除定时器
return function stop() { // 页面或者组件或者标签卸载时进行调用(相当于调用了componentWillUnmount)
clearInterval(timerId)
}
})
return (
和为:{sum}
我的年龄是: {age}
{/* 自动+1 */}
自动+1 ：{he}
)
}三.useRef
作用：
和类组件中的React.createRef()类似，用来获取该组件或者节点的数据
用法：
（1）首先引入useRef
import React, { useRef } from 'react'（2）组件或者节点绑定ref属性，通过current属性来读取该组件或者节点的数据
const input = useRef()
console.log(input.current.value); // current属性为该ref绑定的组件或者节点代码示例：
import React, { useRef } from 'react'
export default function Demo() {
const input = useRef()
function btn() {
console.log(input.current.value); // current属性为该ref绑定的组件或者节点
}
return (
)
}