转载: https://www.jianshu.com/p/f4a6ab8b4bca
本人刚刚入职新公司,以前都是写Vue的,现在新公司技术栈使用的是react。一顿恶补后在实际的项目中还是避免不了踩坑,花大量的时间找原因,debug。。。不知所措的想哭QAQ
公司项目中需要实现一个滚动分页加载数据得效果,按照咱们逻辑应该是这样的:
1.请求前先判断loading是否为true, 为true时return掉阻止请求函数调用,为false时将loading设置为true然后发起请求
2.请求完毕后再将loading设置为false,允许下次再发起请求
import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { LoadingOutlined } from '@ant-design/icons';
import {getScrollLoadList} from '../../api/scrollLoad'
function ScrollLoad() {
const [list, setList] = useState<number[]>([])
const [pageNum, setPageNum]=useState<number>(1)
const [loading, setLoading] = useState<boolean>(false)
const wrapRef = useRef<any>(null)
useEffect(() => {
const Dom = wrapRef.current
Dom.addEventListener('scroll',loadMore)
return () => {
Dom.removeEventListener('scroll',loadMore)
}
// eslint-disable-next-line
},[])
useEffect(() => {
getList()
// eslint-disable-next-line
},[pageNum])
const getList = () => {
setLoading(true) // 设为请求状态
getScrollLoadList({pageNum}).then((res:any) => {
const temp = res.result
const nowList = pageNum === 1 ? temp : [...list,...temp]
setList(nowList)
}).finally(() => {
setLoading(false) // 请求完毕置为false
})
}
const loadMore = (e:any) => {
const {offsetHeight, scrollTop, scrollHeight} = e.target
if(offsetHeight + scrollTop === scrollHeight) {
if(loading) return // 判断是否在请求状态
setPageNum((pageNum)=> pageNum + 1)
}
}
return (
<div ref={wrapRef} className={styles.scroll_wrap}>
{
list && list.length && list.map(item => (
<div key={item} className={styles.wrap_item}>{item}</div>
))
}
{loading && <div className={styles.loading}><LoadingOutlined /></div> }
</div>
)
}
export default ScrollLoad
咋一看好像代码没啥问题啊,但实际上问题大的去了。当连续快速的滚动时,这货始终能调用接口。loadingMore函数里的if(loading) return 并没有产生什么卵用,并且打印出来始终为我们的初始值false,百思不得其解!!!
那么为什么出现这种问题呢?经过一番研究。是因为useEffect(() => {},[])这个副作用相当于class组件内的生命周期componentDidMount,在组件渲染中只执行一次。
重点来了
当上面代码useEffect(() => {},[])执行时会产生闭包,里面用到的state变量会进行缓存,只要这个闭包不被释放,里面的state变量就不会是最新的值。即loading始终为初始状态下的值false。
那么怎么解决这个问题呢?
方案1: 可以将pageNum这个参数传进去即useEffect(() =>
{},[loading]),当loading改变后,会销毁之前的闭包,产生新的闭包,这样就能保证里面使用的state变量是最新的,不过这种方法每次都得重新获取dom元素,设置监听和移除监听事件,比较耗性能。(useEffect(()
=> {})也可以,但是不传只要有状态变化就会销毁和新建相对来说更耗性能) 改动代码如下:
useEffect(() => {
const Dom = wrapRef.current
Dom.addEventListener('scroll',loadMore)
return () => {
Dom.removeEventListener('scroll',loadMore)
}
// eslint-disable-next-line
},[loading]) // 传入loading,监听loading变化
方案2 通过设置一个局部变量。
可以在函数组件外定义一个变量或者函数内使用useRef()创建一个变量(这里简称loadingRef),然后将state值loading赋值给这个变量,当loading改变时,会触发loadingRef的改变,这样就会保证loadingRef是最新的值,然后通过loadingRef活loadingRef.current
去判断即可
import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { LoadingOutlined } from '@ant-design/icons';
import {getScrollLoadList} from '../../api/scrollLoad'
// let loadingRef = false
function ScrollLoad() {
const [list, setList] = useState<number[]>([])
const [pageNum, setPageNum]=useState<number>(1)
const [loading, setLoading] = useState<boolean>(false)
const wrapRef = useRef<any>(null)
const loadingRef = useRef<boolean>()
loadingRef.current = loading
// loadingRef = loading
useEffect(() => {
const Dom = wrapRef.current
Dom.addEventListener('scroll',loadMore)
console.log(Dom,loading)
return () => {
console.log('清空监听事件')
Dom.removeEventListener('scroll',loadMore)
}
// eslint-disable-next-line
},[])
useEffect(() => {
getList()
// eslint-disable-next-line
},[pageNum])
const getList = () => {
setLoading(true)
getScrollLoadList({pageNum}).then((res:any) => {
const temp = res.result
const nowList = pageNum === 1 ? temp : [...list,...temp]
setList(nowList)
}).finally(() => {
setLoading(false)
})
}
const loadMore = (e:any) => {
const {offsetHeight, scrollTop, scrollHeight} = e.target
if(offsetHeight + scrollTop === scrollHeight) {
console.log(loadingRef, '下拉加载之前')
// if(loadingRef) return
if(loadingRef.current) return
setPageNum((pageNum)=> pageNum + 1)
}
}
return (
<div ref={wrapRef} className={styles.scroll_wrap}>
{
list && list.length && list.map(item => (
<div key={item} className={styles.wrap_item}>{item}</div>
))
}
{loading && <div className={styles.loading}><LoadingOutlined /></div> }
</div>
)
}
export default ScrollLoad