在功能组件中反应构造函数

Question

现在有了 React 钩子，我们可以在功能组件中拥有状态，所以我尝试重写我之前使用类组件编写的一个小项目，在这个过程中我遇到了一个我可能有解释但我想确定的问题。

简要概述

因此，在我的App.js组件中，我获取数据，然后将其作为道具传递给按步骤呈现数据的列表组件，首先它显示 4 个项目，然后在滚动时添加更多项目。

我这样做的方式是，api 给了我一个包含 30 个项目的数组，我将所有这些都传递给一个list组件，在那里我有一个底层数组，我不断从项目中提取并更新状态以便呈现。

示例代码

class List extends Component {
    constructor() {
        super();
        this.underlyingArray = [];
        this.state = {
            visibleList: []
        }
    }
    componentDidUpdate() {
        // checks if we have data 
        // populates the underlyingArray only if it's empy
    }

    render() {
        return this.state.visibleList
    }
}

在构造函数中，我将其初始化underlyingArray为空，然后在有数据时填充它。

---

现在，当我尝试将所有这些转换为功能组件时，underlying array每次状态更改时都会被清除或初始化

示例代码

const List = (props) => {
    let underlyingArray = [];
    let [visibleList, setVisibleList] = useState([])

    useEffect(() => {

        // checks if we have data 
        // populates the underlyingArray only if it's empy

    }, [props.data]); // runs the above code when we receive data from the api call

    return visibleList;
}

因此，我尝试将 aconsole.log()放在函数的顶部，并发现每当有状态更改时，我都会看到该日志消息，因此我为此查找了解决方案，并在 SO 上找到了一些建议的答案，建议使用有效的useRef()钩子。

但是，如果我多次调用在顶部执行一些内务处理的函数，认为我只会运行一次，并且由于钩子可以在功能组件中使用状态，那么这会产生性能问题，那么类似于构造函数的功能在哪里?

那么，constructor-like functionality除了使用之外是否还有初始化组件的方法，useRef()因为如果它提供了一个函数，它仍然会在每次渲染时运行。

Answer 1

您可以传递一个空数组作为第二个参数useEffect：

useEffect(() => {
  // Some initialization logic here
}, []);

这样，只有在安装或卸载组件时才会使用效果。