企业官网建设流程全解析

react-perimeter 是一款轻量级 React 组件，可以为任意元素创建一层不可见的"警戒区"（perimeter），当鼠标靠近并突破这层边界时自动触发回调。本文带你快速吃透它的 3 个核心 Props——padding、onBreach、once，并附上一张速查表，帮你在路由预加载、懒加载等场景中秒级上手。

30 秒了解 react-perimeter

想象一下：鼠标还没点到"Load More"按钮，数据就已经在后台悄悄预取了。这正是 react-perimeter 的典型玩法：

• 给元素套一层像素级的缓冲范围（padding）
• 监听mousemove，实时判断鼠标是否进入范围
• 一旦"突破边界"，就执行你指定的onBreach回调

整个实现核心只有一个组件Perimeter，源码不足 200 行，位于 src/index.js，阅读门槛极低。

核心 Props 速查表

💡 类型定义可参考源码中的 Flow 声明与 PropTypes 校验，其中onBreach与padding为isRequired，缺一不可。

padding：给元素套上多大的"警戒圈"

padding决定了警戒区向外扩张多少像素。组件挂载时会通过getBoundingClientRect拿到元素边界，再叠加padding算出四周的触发范围（见 handleMouseMove 判定逻辑）。

经验值参考：

• 60~100：适合"鼠标靠近就预加载"的链接场景
• 值越大触发越早，但也可能误触（比如用户只是路过页面）
• 窗口resize时边界会自动重算，滚动位置的变化也已通过pageYOffset修正，无需额外处理

onBreach：突破边界后执行什么

onBreach是必传的回调，签名非常简单：() => void。最常见的两种用法：

1. 预加载路由分片：传入react-loadable的preload方法，实现"鼠标靠近即预取"
2. 预取数据：比如提前发起下一页的 API 请求

demo 中的PreloadLink封装就展示了标准姿势——鼠标距离链接 100 像素内就开始预加载目标路由：

• 封装位置：PreloadLink 组件
• 三个导航链接分别在padding={100}下预载 Home、About、Topics 页面：demo/src/index.js

⚠️ 注意：onBreach只会在未触发状态下调用（内部用this.breached标记去重，见 源码 L153-L157）。也就是说：鼠标进入范围触发一次 → 移出范围重置 → 再次进入会再触发。

once：只响一次就"收枪"

once是性能利器，默认false。设为true后，首次触发onBreach就会移除mousemove和resize两个监听器（实现见 once 分支逻辑），组件进入"静默"状态。

适用场景：

• ✅ 路由 chunk 预加载：请求发出去就行，不需要反复触发
• ✅ 一次性数据预取：避免重复发起相同请求
• ❌ 持续型交互（如实时高亮）：这类需求应保持once为默认值

一句话记忆：onBreach负责"做什么"，once决定"只做一次还是反复做"。

mapListeners 彩蛋：防抖与节流

如果你 profile 后发现mousemove高频回调影响了性能，可以通过mapListeners把内部监听器整体替换掉：

<Perimeter mapListeners={listener => debounce(listener, 20)} />

它会把resize和mousemove两个监听器分别传入你的函数，并用返回的新函数替代（构造函数中的映射逻辑见 src/index.js#L42-L45）。官方还建议配合react-listener-provider在应用多处使用<Perimeter>时去重事件监听，避免重复注册。

上手三步走

1. 安装依赖：yarn add react-perimeter
2. 用<Perimeter>包裹目标元素，传入padding与onBreach
3. 若只需触发一次，追加once并配合 render 回调把ref挂到真实元素上（可避免默认的span包裹）

一个最小可用示例（与 README.md 用法示例一致）：

<Perimeter onBreach={this.prefetch} padding={60}> <button onClick={this.fetch}>Load More</button> </Perimeter>

默认包裹行为说明见 render 方法：children是函数时走 render 回调，否则自动包一层span。

常见问题 FAQ

Q：padding可以设 0 吗？A：可以。0表示鼠标必须精确进入元素本身的边界区域才触发。

Q：once触发后，鼠标再靠近会怎样？A：监听器已被移除，不会有任何反应——这正是节省性能开销的设计。

Q：如何验证监听器正常挂载/卸载？A：项目自带单测，覆盖挂载时注册 2 个监听、卸载时移除 2 个监听的断言，可参考tests/index.spec.js 中的 测试用例。

总结

react-perimeter 的 API 面积极小，掌握下面这组搭配就能覆盖 95% 场景：

源码入口：src/index.js；可运行示例：demo/src/index.js。如此简洁的"不可见围栏"，是 React 应用中实现无感预加载的低成本好选择。