useState,useEffect,useRef,useSelector,useDispatch的基本使用
1,关于useState的使用,使用useState()进行状态管理
import React, { useEffect, useRef, useState } from 'react'
function App(props) {
// setName为设置name的值的函数,useState可设置name的默认值
const [name, setName] = useState(props.name)
const [age, setAge] = useState(props.age)
// useState支持传入一个函数来设置默认值
const [count, setCount] = useState(() => {
return props.count || 0
}))
const changeName = value => {
// 改变name的值
setName(value)
}
// 直接用name
return (
<>
<div>{name}</div>
<button onClick={() => changeName('yebuyu')}>改变name值</button>
</>
)
}
2,useEffect的使用
1)useEffect是通用的副效应钩子 ,组件加载以后,React 就会执行这个函数(最少执行一次);
2)useEffect()的第二个参数,为一个数组,数组元素为指定的依赖项,只有当依赖项变量发生变化时,副效应函数才会执行(可以用作watch监听,某个变量更新就执行该函数);
3)若第二个参数为空数组,则副效应函数只运行一次;
4)多个副效应需要使用多个useEffect()
import React, { useEffect, useRef, useState } from 'react'
const App = (props) => {
// 第二个参数为依赖项,只有当props.name值改变时才会调用useEffect(),初始化时也会调用一次
useEffect(() => {
document.title = `Hello, ${props.name}`;
}, [props.name]);
return <h1>Hello, {props.name}</h1>;
}
5)useEffect允许返回一个函数,组件在卸载时执行;一般可用于初始化数据、清理副效应、监听、定时器等;
useEffect(() => {
window.addEventListener('beforeunload', fn)
timer = setTimeout(() => {
// do something
}, 200)
return () => {
window.removeEventListener('beforeunload', fn)
clearTimeout(timer)
timer = null
};
}, []);
3,useRef()的使用:获取ref
import { useEffect, useRef, useState } from 'react'
const GetElement = () => {
const ref = useRef()
useEffect(() => {
if (ref.current) {
console.log(`width: ${ref.current.clientWidth}, height: ${ref.current.clientHeight}`)
}
}, [])
return (
<div>
<h2>Get Element</h2>
<div ref={ref} style={{ width: 400, height: 300, background: 'red' }} />
</div>
)
}
4,useSelector的使用:获取redux里面的state;useDispatch的使用:获取redux里面的方法,以便调用
import { useEffect, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
const App = () => {
// 获取redux的方法
const dispatch = useDispatch()
// 获取redux的变量名
const { emailText } = useSelector(state => ({
emailText: state.chat.emailText,
}))
useEffect(() => {
console.log(emailText)
// 执行store中chat模块的setEmail方法名
dispatch.chat.setEmail('123')
}, [emailText])
return (
<div>
...
</div>
)
}
参考链接: