时间戳

首页 > 解决方案 > 在功能组件中做出类似构造函数的反应

reactjs - 在功能组件中做出类似构造函数的反应

问题描述

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

简要概述

因此，在我的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()的方法，因为如果它提供了一个函数，它仍然会在每次渲染时运行。

标签： reactjs

解决方案

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

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

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

推荐阅读