react function component,achieve scrollload through IntersectionObserver
npm install @xiaoluxiaolu/react-scrollload一个 react 的 function 组件,使用 IntersectionObserver API 实现了滚动加载功能。
_A React Function component that implements scrolling loading using the IntersectionObserver API._
IntersectionObserver API 目前在标准中的状态为 wd(W3C 手稿),在www.caniuse.com上查询,该 API 已得到92.19% + 1.6% = 93.79%的全球浏览器支持。
_The IntersectionObserver API is currently in the standard status of WD (W3C Manuscript),The API is supported by 92.19% + 1.6% = 93.79% of the world's browsers at www.caniuse.com._
如果您在使用中遇到兼容问题,可以安装intersection-observer这一 IntersectionObserver polyfill,进行兼容处理。
_If you run into compatibility problems, you can install the intersectionObserver polyfill, intersection-observer, for compatibility._
```
npm install --save @xiaoluxiaolu/react-scrollload
---
`javascript
import React, { useState, useMemo, useCallback } from 'react';
import { render } from 'react-dom';
import Scrollload from '@xiaoluxiaolu/react-scrollload';
const Example = () => {
const [list, setList] = useState([]);
const loadMoreFun = useCallback(() => {
setList((oldList) => oldList.concat(Array.from({ length: 10 })));
// if you wan'to stop loading more, return false in this function
// if (some condition) {
// return false
// }
}, []);
const option = useMemo(() => ({}), []);
return (
当加载触发时,执行的回调。
_The callback that is executed when the load is triggered._
当需要停止继续加载数据时,在这个 function 中 return false 即可,支持返回一个 Promise 对象,Promise 对象 reject 时或 resolve 时且 value 为 false 则停止继续加载数据。
_Loading will be stopped with false or a resolved Promise with value false or a rejected Promise returned_
请使用 useCallback 包裹,以免触发 re-render
_Please use the useCallback to avoid triggering re-render_
一个可以用来配置 observer 实例的对象,参考:MDN
_An optional object which customizes the observe,reference:MDN_
如果传入,请使用 useMemo 包裹,以免触发 re-render
_If passed in, use the useMemo to avoid triggering re-render_
被监听元素的内容
_The contents of the element being listened on_