Javascript 使用useEffect挂钩时的FlatList性能警告问题

当使用useEffect钩子获取数据时，我在平面列表中得到一个警告

这是重现问题的完整组件：

import React, { useState, useEffect } from "react";
import {
  Text,
  View,
  FlatList,
  ActivityIndicator,
  SafeAreaView,
  Button
} from "react-native";

const Test = props => {
  const [people, setPeople] = useState([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);

  useEffect(() => {
    setLoading(true);
    fetch(`http://jsonplaceholder.typicode.com/photos?_start=${page}&_limit=20`)
      .then(res => res.json())
      .then(res => {
        //console.log(res);
        setPeople(people => [...people, ...res]);
        setLoading(false);
      });
  }, [page]);

  const loadMore = () => {
    setPage(page + 20);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FlatList
        data={people}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View>
            <Text>{item.id}</Text>
            <Text>{item.title}</Text>
          </View>
        )}
        ListFooterComponent={
          loading ? (
            <ActivityIndicator />
          ) : (
            <Button title="Load More" onPress={loadMore} />
          )
        }
      />
    </SafeAreaView>
  );
};

export default Test;

在我的组件中，我更新了

renderItem={renderItems}

：

  const renderItems = itemData => {
    return (
      <PureComponentTest
        id={itemData.item.id}
        title={itemData.item.title}
      />
    );
  };

const renderItems=itemData=>{
返回(
);
};

我真的看不出您的组件有什么问题。这是一个非常简单的纯成分。这可能只是因为获取的数据太大。尝试减少每次获取的页面数。比如说5页或10页

我真的看不出你的组件有什么问题。这是一个非常简单的纯成分。这可能只是因为获取的数据太大。尝试减少每次获取的页面数。比如说5页或10页

也许警告是为了让fetch-into-use-effect，所以请查看下一个文档：

关于useEffect挂钩，需要记住一些规则：

不能在条件中调用钩子；必须调用钩子 一模一样的顺序。将useEffect放在条件 可以打破这种循环；传递钩子的函数不能是 异步函数，因为异步函数隐式返回承诺， useEffect函数要么不返回任何内容，要么返回清理函数

考虑使用它：

fetch(`http://jsonplaceholder.typicode.com/photos?_start=${page}&_limit=20`)
 .then(res => res.json())
 .then(res => {
        //console.log(res);
        setPeople(people => [...people, ...res]);
      })
 .catch(error=> console.error(error))
 .finally(() => setLoading(false));

---

可能警告是针对fetch-into-useffect的，因此请查看下一个文档：

关于useEffect挂钩，需要记住一些规则：

不能在条件中调用钩子；必须调用钩子 一模一样的顺序。将useEffect放在条件 可以打破这种循环；传递钩子的函数不能是 异步函数，因为异步函数隐式返回承诺， useEffect函数要么不返回任何内容，要么返回清理函数

考虑使用它：

fetch(`http://jsonplaceholder.typicode.com/photos?_start=${page}&_limit=20`)
 .then(res => res.json())
 .then(res => {
        //console.log(res);
        setPeople(people => [...people, ...res]);
      })
 .catch(error=> console.error(error))
 .finally(() => setLoading(false));

---

如果自合并结果后列表过长，则会出现警告。我可以在我的应用程序分页，但我认为无限滚动作为更好的UI体验。也许这只是一个错误的警告，因为useEffect不使用shouldComponentUpdate？但是它使用了依赖项

[page]

。我没有主意了。如果在我合并结果后列表太长，就会出现警告。我可以在我的应用程序分页，但我认为无限滚动作为更好的UI体验。也许这只是一个错误的警告，因为useEffect不使用shouldComponentUpdate？但是它使用了依赖项

[page]

。我的点子快用完了。