我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文还是继续案例一个react中使用useSyncExternalStore订阅外部数据的例子。本文订阅的数据源是window.scrollY，希望能够举一反三，能够明白useSyncExternalStore到底是个怎么样的函数。当然，还是先强调一下，react里面以use开头的函数，都是只能用在函数式组件里面的。

苏南大叔：react教程，如何利用useSyncExternalStore订阅scrollY？ - 竖直方向滚动值订阅
react教程，如何利用useSyncExternalStore订阅scrollY？（图3-1）

苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。

基本原理

基本原理就是监控 window.scrollY，以前的思路来说，拿个setInterval来定期获取window.scrollY即可。现在react里面的思路就是使用useSyncExternalStore，监控scroll事件，拿到window.scrollY。

苏南大叔：react教程，如何利用useSyncExternalStore订阅scrollY？ - 截图scrolly
react教程，如何利用useSyncExternalStore订阅scrollY？（图3-2）

在本文中，为了体现页面的熟知滚动值，这里使用Array.from().map()生成了多个占位符。这里的资料，可以参考：

在前面的文章里面，还使用useSyncExternalStore订阅过下面的事件：

监控代码

import { useSyncExternalStore } from "react";
function subscribe(onStoreChange) {
    global.window?.addEventListener("scroll", onStoreChange);
    return () =>
        global.window?.removeEventListener(
            "scroll",
            onStoreChange
        );
}
function useScrollY(getY = (id) => id) {
    return useSyncExternalStore(
        subscribe,
        () => getY(global.window?.scrollY),
        () => undefined
    );
}
function ScrollY() {
    const scrollY = useScrollY();
    return <div>{scrollY}</div>;
}
const App = () => {
    return (<>
        {Array.from({ length: 100 }).map((value, index) => {
            return (
                <p key={index}>占位符</p>
            )
        })}
        <div style={{ position: 'fixed', bottom: '0px', right: '0px' }}>
            <ScrollY />
        </div>
    </>)
}
export default App;
JavaScript

苏南大叔：react教程，如何利用useSyncExternalStore订阅scrollY？ - 主体代码
react教程，如何利用useSyncExternalStore订阅scrollY？（图3-3）

函数的参数默认值

在自定义的useScrollY()中，有个比较罕见的参数默认值。参数名称是getY，它的默认值是(id) => id。下面两个函数定义是一致的效果：

function useScrollY(getY = (id) => id) {
  //...
}
JavaScript
function useScrollY() {
  const getY = (id) => id;
  //...
}
JavaScript

window.scrollY三种写法

下面的三种写法都是一样的效果：

global.window?.scrollY
JavaScript
global.window.scrollY
JavaScript
window.scrollY
JavaScript

结束语

这里还有很多react相关的经验文章，欢迎点击：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   react