目录
一、useEffect副作用
(1)使用useEffect
(2)执行时机(第二个参数)
(3)倒计时demo
(4)请求ajax
(5)useEffect的清理函数
(6)图片移动demo
(7)图片移动demo 封装
二、 useRef(引用)
(1)使用方法
(2)demo 获取input的值
(3)demo 清除定时器
(4)demo 验证码倒计时
(5)demo 验证码倒计时 抽离hooks
三、useContext(跨组件传值)
一、使用方法
二、传值Demo
副作用: 平常把一些 除了定义 和 dom 一些无关的代码放到effect里,(例如请求ajax)
import { useEffect } from 'react'
useEffect(() => {
console.log('useEffect1')
})
情况一:不写第二个参数,页面创建 和 数据更新会执行
useEffect(() => {
console.log('useEffect1')
})
情况二:第二个参数是空数组 执行时机: 只有在组件创建时会执行一次
useEffect(() => {
console.log('useEffect2')
}, [])
情况三:第二个参数 依赖项 执行时机:页面创建 和依赖数据更新了 会执行 注意写法是 [ 变量 ]
useEffect(() => {
console.log('useEffect3')
}, [a])
import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom/client'
const Ren = function () {
const [a, setA] = useState(100)
useEffect(() => {
setInterval(() => {
console.log('倒计时', a)
setA(e => e - 1)
}, 1000)
}, [])
return 倒计时100个数 {a}
}
import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom/client'
import axios from 'axios'
const Ren = function () {
useEffect(() => {
axios({
method: 'GET',
url: 'https://www.xxx.cn/api/cart',
data: {}
}).then(res => {
console.log(res)
})
})
return
}
写成 async await形式
错误写法:
useEffect(async () => {
await axios({
method: 'GET',
url: 'https://www.xxx.cn/api/cart',
data: {}
}).then(res => {
console.log(res)
})
})
正确写法:
useEffect(() => {
const getList = async () => {
const res = await axios({
method: 'GET',
url: 'https://www.xxx.cn/api/cart',
data: {}
})
console.log(res)
}
getList()
})
async 后面要跟一个promise 而useEffect并不是 所以 我们可以在useEffect里定义一个函数 直接调用
副作用函数的返回值是可选的,也可以省略,也可以返回一个清理函数 清理副作用
执行时机:清理函数会在 组件卸载时以及下次副作用函数调用之前执行
useEffect(() => {
return () => // 做清理工作
})
demo 清除鼠标移动事件
import React, { useEffect, useState } from 'react'
// import ReactDOM from 'react-dom/client'
import ReactDOM from 'react-dom'
const Ren = function () {
useEffect(() => {
const f = (e) => {
console.log(e.screenX, e.screenY)
}
window.addEventListener('mousemove', f)
return () => {
window.removeEventListener('mousemove', f)
}
})
return 111
}
export default function Use () {
const [isShow, toggle] = useState(true)
const hide = () => {
toggle(false)
}
return (
{isShow && }
切换
)
}
// const root = ReactDOM.createRoot(document.getElementById('root'))
// root.render()
ReactDOM.render(, document.getElementById('root'))
在上面代码中 在组件里绑定了鼠标事件 当销毁组件时 事件并不会被销毁 这时候可以利用useEffect清理函数来清除掉 鼠标移动事件
import React, { useEffect, useState } from 'react'
// import ReactDOM from 'react-dom/client'
import ReactDOM from 'react-dom'
import img from '../images/avatar.png'
const Ren = function () {
const [X, setX] = useState(0)
const [Y, setY] = useState(0)
useEffect(() => {
const f = (e) => {
console.log(e.screenX, e.screenY)
setX(() => e.screenX)
setY(() => e.screenY)
}
window.addEventListener('mousemove', f)
return () => {
window.removeEventListener('mousemove', f)
}
})
return (
)
}
// const root = ReactDOM.createRoot(document.getElementById('root'))
// root.render()
ReactDOM.render( , document.getElementById('root'))
mouseMoveXY.js
import React, { useEffect, useState } from 'react'
// 如果是函数组件首字母要大写 如果是hooks函数 要以use开头
// 调用要在 函数组件里面调用
export default function useMouseMove () {
const [X, setX] = useState(0)
const [Y, setY] = useState(0)
useEffect(() => {
const f = (e) => {
console.log(e.screenX, e.screenY)
setX(() => e.screenX)
setY(() => e.screenY)
}
window.addEventListener('mousemove', f)
return () => {
window.removeEventListener('mousemove', f)
}
})
return { X, Y }
}
使用
import React, { useEffect, useState } from 'react'
// import ReactDOM from 'react-dom/client'
import ReactDOM from 'react-dom'
import img from '../images/avatar.png'
import mousemove from './mouseMoveXY'
const Ren = function () {
const { X, Y } = mousemove()
return (
)
}
ReactDOM.render( , document.getElementById('root'))
1.导入 import React, { useRef } from 'react'
2.定义 const getInput = useRef(null)
3.使用 ref={getInput}
import React, { useRef, useState } from 'react'
// import ReactDOM from 'react-dom/client'
import ReactDOM from 'react-dom'
const Ren = function () {
const getInput = useRef(null)
console.log(getInput)
const [text, SetText] = useState('')
const edit = (e) => {
console.log(e.target.value)
SetText(() => e.target.value)
}
const getText = () => {
console.log(getInput.current.value)
}
return (
)
}
ReactDOM.render( , document.getElementById('root'))
import React, { useEffect, useRef, useState } from 'react'
// import ReactDOM from 'react-dom/client'
import ReactDOM from 'react-dom'
const Ren = function () {
const getInput = useRef(null)
console.log(getInput)
const timer = useRef(null)
const [Num, setNum] = useState(0)
// let timer = null //相当于每次都是在赋值一个null 错误写法
useEffect(() => {
// timer = setInterval(() => {
timer.current = setInterval(() => {
setNum(() => Num + 1)
}, 1000)
}, [])
const edit = (e) => {
}
const clearTimer = () => {
// clearInterval(timer)
clearInterval(timer.current)
}
return (
倒计时 {Num}
)
}
ReactDOM.render( , document.getElementById('root'))
如果在外层定义一个timer 定义定时器 当每次倒计时 值发生改变时 整个组件都会重新执行 相当于每次倒计时都在定义了一个timer 如果想清除定时器 可以 用useRef 把定义的变量 使用 变量.current 来当成定时器 的变量 可以理解为 useRef 定义的 current里永远都是引用类型 不会改变
import React, { useEffect, useRef, useState } from 'react'
// import ReactDOM from 'react-dom/client'
import ReactDOM from 'react-dom'
const Ren = function () {
const timer = useRef(null)
const [Num, setNum] = useState(3)
const [Status, setStatus] = useState(false)
const countDown = () => {
timer.current = setInterval(() => {
setNum((Num) => {
setStatus(true)
return Num - 1
})
}, 1000)
}
useEffect(() => {
if (Num == 0) {
clearInterval(timer.current)
setStatus(false)
setNum(3)
}
console.log(Num)
}, [Num])
return (
倒计时 {Num}
)
}
ReactDOM.render( , document.getElementById('root'))
import React, { useEffect, useRef, useState } from 'react'
// import ReactDOM from 'react-dom/client'
import ReactDOM from 'react-dom'
const useCount = (count = 10, callback = () => { }) => {
const timer = useRef(null)
const [Num, setNum] = useState(null)
const start = () => {
setNum(count)
timer.current = setInterval(() => {
setNum(num => num - 1)
}, 1000)
}
useEffect(() => {
if (Num == 0) {
clearInterval(timer.current)
callback()
}
}, [Num])
return { start, Num }
}
const Ren = function () {
const [Status, setStatus] = useState(false)
const { start, Num } = useCount(3, () => {
setStatus(false)
})
const countDown = () => {
setStatus(true)
start()
}
return (
倒计时 {Num}
)
}
ReactDOM.render( , document.getElementById('root'))
count 作为倒计时秒数、callback作为 倒计时之后的回调函数
demo 验证码倒计时封装抽离出一个组件 useCountDown.js
import { useEffect, useRef, useState } from 'react'
export default function useCountDown (count = 10, callback = () => { }) {
const timer = useRef(null)
const [Num, setNum] = useState(null)
const start = () => {
setNum(count)
timer.current = setInterval(() => {
//组件清楚后仍会执行
console.log(1)
setNum(num => num - 1)
}, 1000)
}
useEffect(() => {
if (Num == 0) {
setNum(count)
clearInterval(timer.current)
callback()
}
}, [Num])
useEffect(() => {
return () => {
clearInterval(timer.current)
}
}, [])
return { start, Num }
}
记得通过useEffect的清理函数 清理一下 定时器事件 极端情况下 销毁组件后 延时器仍会执行
使用
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import useCountDown from './useCountDown'
const Ren = function () {
const [Status, setStatus] = useState(false)
const { start, Num } = useCountDown(3, () => {
setStatus(false)
})
const countDown = () => {
setStatus(true)
start()
}
return (
倒计时 {Num}
)
}
ReactDOM.render( , document.getElementById('root'))
1.导如并调用createContext 得到 Context对象 导出
import React, { useState, createContext } from 'react'
export const Context = createContext()
2.使用Provider包裹根组件 通过value属性提供共享数据
return (
<根组件内容/>
)
3. 子代组件接收
import { useContext } from 'react'
const value = useContext(Context)
console.log(value)
index.js 根组件
import React, { createContext } from 'react'
import ReactDOM from 'react-dom'
import Father from './father'
export const Context = createContext()
const Ren = function () {
return (
根组件
)
}
ReactDOM.render( , document.getElementById('root'))
father.js 父组件
import Son from './son.js'
function Father () {
return (
父组件
)
}
export default Father
son.js 子组件
import { Context } from './index'
import { useContext } from 'react'
function Son1 () {
const value = useContext(Context)
return (
孙子组件: {value.a} {value.b}
)
}
export default Son1