Как обрабатывать ref при перезаписи Antd ListView с помощью React Hooks?

Question

Я пытаюсь перехватить реакции, я хочу переписать Antd-mobile ListView с помощью React Hooks, вот демонстрационная версия, и это мой полуфабрикат, приведенный ниже:

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, когда я переписываю его функциональным компонентом, Как переписать два предложения.