用react钩子重写antd列表视图时如何处理ref?

我在努力 hooks 的反应, 我想重写antd mobile ListView 有了React钩子,这里是一个演示,这是我下面的半成品代码:

import React, {useState, useEffect} from "react"
import {ListView, WhiteSpace, Grid,Card} from 'antd-mobile';
import axios from "axios";


function ArticleList() {
    const [articles, setArticles] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [height, setHeight] = useState((document.documentElement.clientHeight * 3) / 4);
    let page=1;

    useEffect(() => {
        const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;  //sentence 1
        getArticleList().then(res => {
           setArticles([...articles,...res.data.article_list]);
           setIsLoading(false);
           setHeight(hei);
        });
    },[]);

    const getArticleList = params => {
        return axios.get('/api/articles', params).then(res => {
            return res.data
        }, err => {
            return Promise.reject(err);
        }).catch((error) => {
            return Promise.reject(error);
        });
    };


    let onEndReached = (event) => {
        if (isLoading && !this.state.hasMore) {return;}
        setIsLoading(true);
        getArticleList(++page).then(res => {
            setArticles([...articles,...res.data.article_list]);
            setIsLoading(false);
        });
    };

    const row = (rowData) => {
        return (
            <div key={rowData.id}>
                //...
            </div>
        );
    };

    return (
        <ListView
            ref={el => this.lv = el}  //sentence 2
            dataSource={articles}
            renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>{isLoading ? 'Loading...' : 'Loaded'}</div>)}
            renderRow={row}
            style={{height: height,overflow: 'auto',}}
            pageSize={4}
            onScroll={() => { console.log('scroll'); }}
            scrollRenderAheadDistance={500}
            onEndReached={onEndReached}
            onEndReachedThreshold={10}
        />
    );
}

export default ArticleList;

问题:

问题是关于下面这两句话,它们可以在上面的代码中找到:

1、const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
2、ref={el => this.lv = el}

原始示例使用类组件,因此 ReactDOM 和 this ,当我用函数组件重写它时,如何重写这两个句子。