React Hook 实现下拉刷新功能-FunTeaLearn Online Web Tutorials

React Hook 是 React 16.8 中新增的特性，它让我们可以在不编写 class 组件的情况下使用 state 和其它 React 特性。本文将介绍如何使用 React Hook 实现下拉刷新功能，并附带示例代码。

实现思路

实现下拉刷新功能的思路比较简单：

监听用户的下拉动作。
在用户下拉到一定距离后，触发下拉刷新操作。
在下拉刷新过程中展示 Loading 状态，提示用户操作正在进行中。
下拉刷新完成后，更新列表内容。

在 React Hook 中，我们可以利用 useEffect Hook 来监听用户的下拉动作，并在必要时触发下拉刷新操作。

示例代码

以下是一个简单的下拉刷新示例，包含四个组件：

App 组件，作为渲染入口，包含一个数据列表和一个下拉刷新组件。
DataList 组件，负责展示数据列表。
PullToRefresh 组件，实现下拉刷新功能。
Loading 组件，用来展示 Loading 状态。

App.js

// www.javascriptcn.com code example
import React, { useState } from 'react';
import PullToRefresh from './PullToRefresh';
import DataList from './DataList';

const App = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  const handleRefresh = () => {
    setLoading(true);
    // 模拟异步操作
    setTimeout(() => {
      setData(['item1', 'item2', 'item3']);
      setLoading(false);
    }, 3000);
  };

  return (
    <>
      <PullToRefresh onRefresh={handleRefresh} loading={loading} />
      <DataList data={data} />
    </>
  );
};

export default App;

PullToRefresh.js

// www.javascriptcn.com code example
import React, { useState, useEffect } from 'react';
import Loading from './Loading';

const PullToRefresh = ({ onRefresh, loading }) => {
  const [isDragging, setIsDragging] = useState(false);
  const [startY, setStartY] = useState(null);
  const [touchMoveY, setTouchMoveY] = useState(null);

  useEffect(() => {
    const handleTouchMove = e => {
      if (!isDragging) return;
      setTouchMoveY(e.touches[0].clientY);
    };
    const handleTouchEnd = () => {
      if (!isDragging) return;
      setIsDragging(false);
      if (touchMoveY - startY > 50) {
        onRefresh();
      }
    };
    document.addEventListener('touchmove', handleTouchMove);
    document.addEventListener('touchend', handleTouchEnd);
    return () => {
      document.removeEventListener('touchmove', handleTouchMove);
      document.removeEventListener('touchend', handleTouchEnd);
    };
  }, [isDragging, onRefresh, startY, touchMoveY]);

  const handleTouchStart = e => {
    setIsDragging(true);
    setStartY(e.touches[0].clientY);
    setTouchMoveY(e.touches[0].clientY);
  };

  return (
    <div className="pull-to-refresh" onTouchStart={handleTouchStart}>
      {loading ? <Loading /> : ''}
      <div className="pull-to-refresh__arrow"></div>
      <div className="pull-to-refresh__text">下拉刷新</div>
    </div>
  );
};

export default PullToRefresh;

DataList.js

// www.javascriptcn.com code example
import React from 'react';

const DataList = ({ data }) => {
  return (
    <div className="data-list">
      {data.map((item, index) => (
        <div key={index} className="data-list__item">
          {item}
        </div>
      ))}
    </div>
  );
};

export default DataList;

Loading.js

import React from 'react';

const Loading = () => {
  return <div className="loading">Loading...</div>;
};

export default Loading;

以上代码实现了一个基本的下拉刷新功能，用户下拉刷新时，下拉刷新组件将显示 Loading 组件，并触发 onRefresh 回调函数，用来更新数据列表。在更新完成后，Loading 组件消失，数据列表中的内容得到更新。

结语

本文介绍了如何使用 React Hook 实现下拉刷新功能，我们利用 useEffect Hook 监听用户的下拉动作，并在必要时触发下拉刷新操作。通过示例代码的演示，相信读者已经对如何实现下拉刷新功能有了更加深入的了解，也能够更好地理解 React Hook 的使用方式。希望本文能够对读者在日常工作和学习中有所帮助！

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67806b72ce7f4861253b0856

React Hook 实现下拉刷新功能