React - 监听器执行Hook不生效的闭包性问题
前言
前几天自己写了一个简单的瀑布流:React - 实现瀑布流加载。当时的代码编写里面,其实是待优化的地方。只不过当时由于问题还没解决,就用了其它方案来代替。
因此本篇文章,就对这个问题做一个探究:闭包性和state
值更改。
一. 案例及分析
import React, { useEffect, useState } from 'react';
import { Row, Button } from 'antd';
const mockData = [{}, {}, {}, {}, {}, {}, {}, {}, {}];
const App: React.FC = () => {
const [ arr, setArr ] = useState<any[]>([]);
const [ count, setCount ] = useState<number>(0);
const initData = async () => {
setArr(mockData);
};
// 页面滚动
const handleScroll = async () => {
const liveDom: any = document.getElementById('test_ljj');
const clientHeight = liveDom.clientHeight;
const scrollTop = liveDom.scrollTop;
const scrollHeight = liveDom.scrollHeight;
if (scrollTop + clientHeight === scrollHeight) {
console.log('到底了');
setCount(count + 1);
}
};
useEffect(() => {
initData();
window.addEventListener('scroll', handleScroll, true);
return () => {
window.removeEventListener('scroll', handleScroll, true);
};
}, []);
return (
<div id='test_ljj' style={{ overflow: 'auto', height: 200, width: 200 }}>
{arr?.map((item, index) => {
return <Row style={{ marginTop: 10 }} key={`index_${index}`}>AAAAAAA</Row>;
})}
Count:{count}
<Button onClick={() => {
console.log(count);
setCount(count + 1);
}} type='primary'>Button</Button>
</div>
);
};
export default App;
页面效果如下:
可见:
- 当我们滚轮到达最下方的时候,监听器是生效的,输出:“到底了”。
- 但是我们监听器里面还对
count
这个state
值进行了更改,同时页面也会进行展示。然而这个count
变更为1之后就没有在改变过。说明对应的Hook
没起作用。 - 但是如果我们点击
Button
按钮,同样进行setCount(count + 1);
操作,发现值能正常的更新并完成渲染。 - 此时再进行滚轮滚动,发现拿到的
count
值依旧是0。这里就可以观测到,监听器相关的代码部分是不是形成了闭包?
为什么会有这样的现象呢?我们来分析下。
1.1 useEffect的闭包性
我们看案例代码中的关键部分:
useEffect(() => {
initData();
window.addEventListener('scroll', handleScroll, true);
return () => {
window.removeEventListener('scroll', handleScroll, true);
};
}, [ ]);
我们知道,useEffect
的第二个参数传了一个空数组,因此里面的函数只会执行一次。这个useEffect
形成了一个闭包,只在组件第一次渲染的时候执行。
既然是闭包的话:
- 那么这个闭包的作用域就已经规定死了。而闭包里面有一个滚动的监听事件。
- 而监听事件中拿到的
count
变量,是从外部作用域拿到的。 - 你可以理解为,当
useEffect
执行了一次,那它的执行结果以及当前状态下各个state
的状态都已经规定好了,并不会被改变。 - 因此对于结果来说,我们观测到的结果就是:无论监听器(闭包范围内)尝试多少次去修改
count
值,都不会改变。(因为结果在第一次执行的时候就已经决定了)
对于Button
按钮:
- 点击按钮,调用
setCount
触发了组件重新渲染。App
函数会重新执行,此时通过useState
拿到最新的count
值为2。 - 因为
userEffect
并不会执行第二次,所以useEffect
内的监听器拿到的count
始终是第一次渲染时,生成的作用域中count
对象的值。也就是0。
因此我们这么更改代码即可:
useEffect(() => {
initData();
window.addEventListener('scroll', handleScroll, true);
return () => {
window.removeEventListener('scroll', handleScroll, true);
};
}, [ count ]);
结果如下:
备注:
- 一般情况下,这种添加监听器的操作不需要重复执行多次,因此需要将业务
state
和你的useEffect
代码进行拆分。比如你可以写两个useEffect
。 - 本案例只是为了简单说明,这么写。
1.2 瀑布流伪代码优化
我在上一篇文章里面,使用了全局变量loading
来避免重复请求,这里采用state
的方式。
在原本代码基础上,做一个梳理:
- 页面第一次加载的时候,需要进行数组渲染,我们这里的数组给定了7个对象。
- 页面滚轮到达底部的时候,需要触发瀑布流的一个刷新机制。加载新数据,并添加到旧数据中,并做到页面的渲染。每次加载的数据数量固定为2个。
- 同时注意:不要滚轮到底部时,重复触发瀑布流的数据加载动作(如第一次加载还没完成,滚轮就上下上下重复操作,然后重复触发渲染)
那么直接上代码:
/* eslint-disable @typescript-eslint/no-use-before-define */
import React, { useEffect, useState } from 'react';
import { Row, Col } from 'antd';
const mockData = [{}, {}, {}, {}, {}, {}, {}, {}, {}];
const App: React.FC = () => {
const [ arr, setArr ] = useState<any[]>([]);
const [ isLoading, setIsLoading ] = useState<boolean>(false);
const initData = async () => {
setArr(mockData);
};
// 数组长度2
const addData = () => {
return [{}, {}];
};
const refreshData = () => {
// 删除监听器,避免 “滚轮到达底部” 这一个动作被重复监听
window.removeEventListener('scroll', handleScroll, true);
// 三秒后再添加一个监听器,模拟一下接口的请求
setTimeout(() => {
// 结束加载状态,同时添加回监听器,这样就可以继续监听滚轮是否到底部。
setIsLoading(false);
// 获取新的数据
const newData:any = addData();
// 将新数据拼接到旧数据
setArr(preItems => [].concat(...preItems, ...newData));
window.addEventListener('scroll', handleScroll, true);
}, 2000);
};
// 页面滚动
const handleScroll = async () => {
const liveDom: any = document.getElementById('test_ljj');
const clientHeight = liveDom.clientHeight;
const scrollTop = liveDom.scrollTop;
const scrollHeight = liveDom.scrollHeight;
if (scrollTop + clientHeight === scrollHeight) {
// 刷到底部了,则进行瀑布数据的加载,同时isLoading来避免重复请求
if (!isLoading) {
setIsLoading(true);
}
}
};
// 初始化操作,页面刚进来肯定是需要一些基础数据的,有9条
useEffect(() => {
initData();
// 添加监听器
window.addEventListener('scroll', handleScroll, true);
// 页面销毁的时候,将监听器移除
return () => {
window.removeEventListener('scroll', handleScroll, true);
};
}, [ ]);
// 这里则是用于监听业务逻辑代码的,监听到isLoading的改变,同时只有为true的时候,才会加载数据
useEffect(() => {
if (isLoading) {
refreshData();
}
}, [ isLoading ]);
return (
<Row>
<Col >
<div id='test_ljj' style={{ overflow: 'auto', height: 200, width: 200 }}>
{arr?.map((item, index) => {
return <Row style={{ marginTop: 10 }} key={`index_${index}`}>AAAAAAA</Row>;
})}
</div>
</Col>
<Col>
数组长度:{arr.length}
</Col>
</Row>
);
};
export default App;
只需要注意一点:将业务代码和useEffect
监听的对象进行关联。
- 第一个
useEffect
是用来初始化操作的,这个操作只要执行一次。 - 第二个
useEffect
是用来加载瀑布流数据的,这一个步骤需要监听isLoading
变量,因为闭包性。
最终效果如下:
意思如下:
- 滚轮到达底部,数组长度发生了改变(完成了渲染操作)。说明瀑布流数据加载出来了。
- 短时间内将滚轮在最底部和上方反复来回多次,最终只加载了一次数据。说明防重复成功了。
当然,本文想讨论的重点,还是useEffect
的闭包性,大家以后注意就行,如果希望在useEffect
里操作state
值并得到反馈,那么请把他放到监听数组中(useEffect
的第二个参数)。