如何为 Facebook Messenger 等聊天应用实现 React 无限滚动组件？

Question

如何为 Facebook Messenger 等聊天应用实现 React 无限滚动组件？

ton*_*nix 9 javascript chat reactjs

我知道关于这个主题有很多问题（React 无限滚动），我的问题旨在更深入地确定当前可用的最佳解决方案来实现这样的组件。

我正在开发一个聊天应用程序，我创建了一个类似于 Facebook Messenger 聊天窗口的组件，您可以在桌面浏览器上看到它。

Facebook：

我的（到目前为止）：

实现无限加载的无限滚动结果是很棘手的。从用户体验的角度来看，我需要始终至少满足以下属性：

每行消息的高度应该实时动态计算，因为我不知道消息的高度，因为它们没有固定的高度；
每当用户键入新消息时，滚动条必须自动到达可滚动组件的底部，直到最后发送的消息。可滚动组件本身具有顶部和底部填充（或者我也可以使用边距），以便在聊天的顶部和第一条消息以及底部和最后一条消息之间留出一些空间（看上面的图片）；
聊天在一个弹出元素中，该元素以淡入动画打开，用户可以在使用页面时关闭和打开它；

现在，为了做到这一点，我已经尝试了几个库：

react-infinite：我的第一次尝试，放弃了，因为它需要提前知道所有元素的高度；
react-list：我发现它真的很强大，问题是如果我关闭弹出窗口并在有时它丢失一些已经呈现的消息后重新打开它，在我看来这可能是react-list组件的错误。此外，该组件不允许我向上显示滚动底部（参见https://github.com/coderiety/react-list/issues/50）；
反应虚拟化：很强大，但我发现它非常棘手使用List与InfiniteLoader一起AutoSizer，CellMeasurer和CellMeasurerCache。此外，当我发送消息时，如果我调用List.scrollToIndex(lastIndex)自动将容器滚动到底部，滚动不会完全到达底部，因为可滚动容器具有顶部和底部填充。我无法使用此组件获得令人满意的结果。
react-infinite-any-height：我想试一试，但目前它似乎还没有被移植到 React 16 如果我安装它 NPM 警告我关于 React 15 的不满意的对等依赖性，但我使用反应 16。

所以我的问题更像是一种相互对抗的方式：你们中的某个人是否曾经需要根据我上面写的 3 个要求来实现一个 React 聊天组件？你用的什么库？由于 Facebook Messenger 处理得很好并且他们使用 React，你们中有人知道他们是如何实现这样的组件的吗？如果我检查 Facebook 聊天窗口的聊天消息，它似乎将所有已呈现的消息保留在 DOM 中。但是，如果是这样，这不会影响性能吗？

所以我现在的问题多于答案。我真的很想找到一个适合我需要的组件。另一种选择是实现我自己的。

Answer 1

ton*_*nix 5

2022 年更新

我创建了一个名为的无限滚动 React 组件react-really-simple-infinite-scroll，您可以在 GitHub ( https://github.com/tonix-tuft/react-really-simple-infinite-scroll ) 上找到它并使用 npm 安装它 ( https://www .npmjs.com/package/react-really-simple-infinite-scroll）：

npm install --save react-really-simple-infinite-scroll
npm install --save react react-dom # install React peer deps

Run Code Online (Sandbox Code Playgroud)

用法：

import React, { useState, useCallback, useEffect } from "react";
import { ReallySimpleInfiniteScroll } from "react-really-simple-infinite-scroll";

// You can use any loading component you want. This is just an example using a spinner from "react-spinners-kit".
import { CircleSpinner } from "react-spinners-kit";

/**
 * @type {number}
 */
let itemId = 0;

/**
 * @type {Function}
 */
const generateMoreItems = numberOfItemsToGenerate => {
  const items = [];
  for (let i = 0; i < numberOfItemsToGenerate; i++) {
    itemId++;
    items.push({
      id: itemId,
      label: `Item ${itemId}`,
    });
  }
  return items;
};

export default function App() {
  const [displayInverse, setDisplayInverse] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [isInfiniteLoading, setIsInfiniteLoading] = useState(true);
  const [items, setItems] = useState([]);

  const onInfiniteLoadCallback = useCallback(() => {
    setIsInfiniteLoading(true);
    setTimeout(() => {
      const moreItems = generateMoreItems(25);
      setItems(items => items.concat(moreItems));
      setIsInfiniteLoading(false);
    }, 1000);
  }, []);

  useEffect(() => {
    onInfiniteLoadCallback();
  }, [onInfiniteLoadCallback]);

  useEffect(() => {
    if (items.length >= 200) {
      setHasMore(false);
    }
  }, [items.length]);

  return (
    <div className="app">
      <ReallySimpleInfiniteScroll
        key={displayInverse}
        className={`infinite-scroll ${
          items.length && displayInverse
            ? "display-inverse"
            : "display-not-inverse"
        }`}
        hasMore={hasMore}
        length={items.length}
        loadingComponent={
          <div className="loading-component">
            <div className="spinner">
              <CircleSpinner size={20} />
            </div>{" "}
            <span className="loading-label">Loading...</span>
          </div>
        }
        isInfiniteLoading={isInfiniteLoading}
        onInfiniteLoad={onInfiniteLoadCallback}
        displayInverse={displayInverse}
      >
        {(displayInverse ? items.slice().reverse() : items).map(item => (
          <div key={item.id} className="item">
            {item.label}
          </div>
        ))}
      </ReallySimpleInfiniteScroll>
      <div>
        <button
          onClick={() => setDisplayInverse(displayInverse => !displayInverse)}
        >
          Toggle displayInverse
        </button>
      </div>
    </div>
  );
}

Run Code Online (Sandbox Code Playgroud)

原答案：

我最终实现了自己的非常简单的无限滚动组件（不过还没有重构它以使用钩子）：


import React from "react";
import {
    isUndefined,
    hasVerticalScrollbar,
    hasHorizontalScrollbar,
    isInt,
    debounce
} from "js-utl";
import { classNames } from "react-js-utl/utils";

export default class SimpleInfiniteScroll extends React.Component {
    constructor(props) {
        super(props);

        this.handleScroll = this.handleScroll.bind(this);
        this.onScrollStop = debounce(this.onScrollStop.bind(this), 100);

        this.itemsIdsRefsMap = {};
        this.isLoading = false;
        this.isScrolling = false;
        this.lastScrollStopPromise = null;
        this.lastScrollStopPromiseResolve = null;

        this.node = React.createRef();
    }

    componentDidMount() {
        this.scrollToStart();
    }

    getNode() {
        return this.node && this.node.current;
    }

    getSnapshotBeforeUpdate(prevProps) {
        if (prevProps.children.length < this.props.children.length) {
            const list = this.node.current;
            const axis = this.axis();
            const scrollDimProperty = this.scrollDimProperty(axis);
            const scrollProperty = this.scrollProperty(axis);
            const scrollDelta = list[scrollDimProperty] - list[scrollProperty];

            return {
                scrollDelta
            };
        }
        return null;
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (
            this.isLoading &&
            ((prevProps.isInfiniteLoading && !this.props.isInfiniteLoading) ||
                ((this.props.hasMore || prevProps.hasMore) &&
                    prevProps.children.length !==
                        this.props.children.length)) &&
            snapshot
        ) {
            if (this.props.displayInverse) {
                const list = this.node.current;
                const axis = this.axis();
                const scrollDimProperty = this.scrollDimProperty(axis);
                const scrollProperty = this.scrollProperty(axis);
                const scrollDelta = snapshot.scrollDelta;
                const scrollTo = list[scrollDimProperty] - scrollDelta;

                this.scrollTo(scrollProperty, scrollTo);
            }
            this.isLoading = false;
        }
    }

    loadingComponentRenderer() {
        const { loadingComponent } = this.props;

        return (
            <div
                className="simple-infinite-scroll-loading-component"
                key={-2}
            >
                {loadingComponent}
            </div>
        );
    }

    axis() {
        return this.props.axis === "x" ? "x" : "y";
    }

    scrollProperty(axis) {
        return axis === "y" ? "scrollTop" : "scrollLeft";
    }

    offsetProperty(axis) {
        return axis === "y" ? "offsetHeight" : "offsetWidth";
    }

    clientDimProperty(axis) {
        return axis === "y" ? "clientHeight" : "clientWidth";
    }

    scrollDimProperty(axis) {
        return axis === "y" ? "scrollHeight" : "scrollWidth";
    }

    hasScrollbarFunction(axis) {
        return axis === "y" ? hasVerticalScrollbar : hasHorizontalScrollbar;
    }

    scrollToStart() {
        const axis = this.axis();
        this.scrollTo(
            this.scrollProperty(axis),
            !this.props.displayInverse ? 0 : this.scrollDimProperty(axis)
        );
    }

    scrollToEnd() {
        const axis = this.axis();
        this.scrollTo(
            this.scrollProperty(axis),
            !this.props.displayInverse ? this.scrollDimProperty(axis) : 0
        );
    }

    scrollTo(scrollProperty, scrollPositionOrPropertyOfScrollable) {
        const scrollableContentNode = this.node.current;
        if (scrollableContentNode) {
            scrollableContentNode[scrollProperty] = isInt(
                scrollPositionOrPropertyOfScrollable
            )
                ? scrollPositionOrPropertyOfScrollable
                : scrollableContentNode[scrollPositionOrPropertyOfScrollable];
        }
    }

    scrollToId(id) {
        if (this.itemsIdsRefsMap[id] && this.itemsIdsRefsMap[id].current) {
            this.itemsIdsRefsMap[id].current.scrollIntoView();
        }
    }

    scrollStopPromise() {
        return (
            (this.isScrolling && this.lastScrollStopPromise) ||
            Promise.resolve()
        );
    }

    onScrollStop(callback) {
        callback();
        this.isScrolling = false;
        this.lastScrollStopPromise = null;
        this.lastScrollStopPromiseResolve = null;
    }

    handleScroll(e) {
        const {
            isInfiniteLoading,
            hasMore,
            infiniteLoadBeginEdgeOffset,
            displayInverse
        } = this.props;

        this.isScrolling = true;
        this.lastScrollStopPromise =
            this.lastScrollStopPromise ||
            new Promise(resolve => {
                this.lastScrollStopPromiseResolve = resolve;
            });
        this.onScrollStop(() => {
            this.lastScrollStopPromiseResolve &&
                this.lastScrollStopPromiseResolve();
        });

        this.props.onScroll && this.props.onScroll(e);

        if (
            this.props.onInfiniteLoad &&
            (!isUndefined(hasMore) ? hasMore : !isInfiniteLoading) &&
            this.node.current &&
            !this.isLoading
        ) {
            const axis = this.axis();
            const scrollableContentNode = this.node.current;
            const scrollProperty = this.scrollProperty(axis);
            const offsetProperty = this.offsetProperty(axis);
            const scrollDimProperty = this.scrollDimProperty(axis);
            const currentScroll = scrollableContentNode[scrollProperty];
            const currentDim = scrollableContentNode[offsetProperty];
            const scrollDim = scrollableContentNode[scrollDimProperty];

            const finalInfiniteLoadBeginEdgeOffset = !isUndefined(
                infiniteLoadBeginEdgeOffset
            )
                ? infiniteLoadBeginEdgeOffset
                : currentDim / 2;

            let thresoldWasReached = false;
            if (!displayInverse) {
                const clientDimProperty = this.clientDimProperty(axis);
                const clientDim = scrollableContentNode[clientDimProperty];
                thresoldWasReached =
                    currentScroll +
                        clientDim +
                        finalInfiniteLoadBeginEdgeOffset >=
                    scrollDim;
            } else {
                thresoldWasReached =
                    currentScroll <= finalInfiniteLoadBeginEdgeOffset;
            }
            if (thresoldWasReached) {
                this.isLoading = true;
                this.props.onInfiniteLoad();
            }
        }
    }

    render() {
        const {
            children,
            displayInverse,
            isInfiniteLoading,
            className,
            hasMore
        } = this.props;

        return (
            <div
                className={classNames("simple-infinite-scroll", className)}
                ref={this.node}
                onScroll={this.handleScroll}
                onMouseOver={this.props.onInfiniteScrollMouseOver}
                onMouseOut={this.props.onInfiniteScrollMouseOut}
                onMouseEnter={this.props.onInfiniteScrollMouseEnter}
                onMouseLeave={this.props.onInfiniteScrollMouseLeave}
            >
                {(hasMore || isInfiniteLoading) &&
                    displayInverse &&
                    this.loadingComponentRenderer()}
                {children}
                {(hasMore || isInfiniteLoading) &&
                    !displayInverse &&
                    this.loadingComponentRenderer()}
            </div>
        );
    }
}

Run Code Online (Sandbox Code Playgroud)

我向this.props.children它传递了以下组件类的 React 元素数组，该类扩展了React.PureComponent：

npm install --save react-really-simple-infinite-scroll
npm install --save react react-dom # install React peer deps

Run Code Online (Sandbox Code Playgroud)

这样，重新渲染时，只会重新渲染自上次渲染以来发生更改的组件。

我还使用了不可变的数据结构来存储聊天消息的集合，特别是immutable-linked-ordered-map（https://github.com/tonix-tuft/immutable-linked-ordered-map），它允许我实现O(1)插入的时间复杂度，消息的删除和更新以及O(1)查找的几乎时间复杂度。本质上，ImmutableLinkedOrderedMap是一个有序的不可变映射，就像 PHP 中的关联数组，但不可变：

import React, { useState, useCallback, useEffect } from "react";
import { ReallySimpleInfiniteScroll } from "react-really-simple-infinite-scroll";

// You can use any loading component you want. This is just an example using a spinner from "react-spinners-kit".
import { CircleSpinner } from "react-spinners-kit";

/**
 * @type {number}
 */
let itemId = 0;

/**
 * @type {Function}
 */
const generateMoreItems = numberOfItemsToGenerate => {
  const items = [];
  for (let i = 0; i < numberOfItemsToGenerate; i++) {
    itemId++;
    items.push({
      id: itemId,
      label: `Item ${itemId}`,
    });
  }
  return items;
};

export default function App() {
  const [displayInverse, setDisplayInverse] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [isInfiniteLoading, setIsInfiniteLoading] = useState(true);
  const [items, setItems] = useState([]);

  const onInfiniteLoadCallback = useCallback(() => {
    setIsInfiniteLoading(true);
    setTimeout(() => {
      const moreItems = generateMoreItems(25);
      setItems(items => items.concat(moreItems));
      setIsInfiniteLoading(false);
    }, 1000);
  }, []);

  useEffect(() => {
    onInfiniteLoadCallback();
  }, [onInfiniteLoadCallback]);

  useEffect(() => {
    if (items.length >= 200) {
      setHasMore(false);
    }
  }, [items.length]);

  return (
    <div className="app">
      <ReallySimpleInfiniteScroll
        key={displayInverse}
        className={`infinite-scroll ${
          items.length && displayInverse
            ? "display-inverse"
            : "display-not-inverse"
        }`}
        hasMore={hasMore}
        length={items.length}
        loadingComponent={
          <div className="loading-component">
            <div className="spinner">
              <CircleSpinner size={20} />
            </div>{" "}
            <span className="loading-label">Loading...</span>
          </div>
        }
        isInfiniteLoading={isInfiniteLoading}
        onInfiniteLoad={onInfiniteLoadCallback}
        displayInverse={displayInverse}
      >
        {(displayInverse ? items.slice().reverse() : items).map(item => (
          <div key={item.id} className="item">
            {item.label}
          </div>
        ))}
      </ReallySimpleInfiniteScroll>
      <div>
        <button
          onClick={() => setDisplayInverse(displayInverse => !displayInverse)}
        >
          Toggle displayInverse
        </button>
      </div>
    </div>
  );
}

Run Code Online (Sandbox Code Playgroud)

然后，当我渲染存储在映射中的消息时，我只需调用它的.values()方法，该方法返回一个数组，然后映射该数组以渲染消息，例如：


<SimpleInfiniteScroll>
    {messages.values().map((message) => <ChatMessage ... />)}
</SimpleInfiniteScroll>

Run Code Online (Sandbox Code Playgroud)

嗨@Phyme。对于延迟，我深表歉意，但迟到总比不到好。您现在可以使用“npm install --save react-really-simple-infinite-scroll”安装这个无限滚动组件。我已将其发布到 NPM，您可以通过此导入语句在您的项目中使用它“import {ReallySimpleInfiniteScroll } from“react-really-simple-infinite-scroll”;`查看此处的自述文件：https://github.com /tonix-tuft/react-really-simple-infinite-scroll/blob/master/README.md 祝您新年快乐！ (2认同)

归档时间：	6 年，5 月前
查看次数：	3435 次
最近记录：	5 年，9 月前