Reactjs 如何避免每次选择/取消选择行时重新渲染本机平面列表

看到或看到

我尝试在react原生FlatList的基础上构建一个简单的可选列表。功能很简单：扁平列表中的每一行都是可选择的。如果尚未选择某一行，单击该行将选中该行；如果已选择该行，单击该行将取消选择该行

我面临的问题是，每次单击一行时，所有行都会重新渲染，这可以从日志中看出（例如“渲染项id=cameron”）。nguyen@example.com，selected=false”）。我希望避免对未更改的行进行重新渲染，因为重新渲染可能会很昂贵（在我希望加载非常大的图像或列表非常长的情况下），但我不知道如何进行。我已经尝试了

和

利用

React.memo

，但前者根本不会改变重新渲染行为，而后者使应用程序的行为非常怪异，您可以尝试用其中一个替换

，以查看效果。我还尝试在

onClick

上使用

onClick回调

，但也没有帮助

我是否错误地使用了

React.memo

或

React.useCallBack

？我能做些什么来满足需求？多谢各位

如果代码链接过期，请将代码粘贴到下面：

import React，{memo，useffect，useState}来自“React”；
从“react native”导入{SafeAreaView，FlatList，StyleSheet}；
从“expo常量”导入常量；
从“不可变”导入{Set}；
从“react native elements”导入{Button，ListItem}；
从“axios”导入axios；
常量项=（{id，title，avatarUrl，selected，onClick}）=>{
log（`rendering item id=${id}，selected=${selected}`）；
返回(
onClick（id）}
/>
);
};
功能项EQ（上一项，下一项）{
返回previitem.id==nextItem.id&&previitem.selected==nextItem.selected；
}
//没有区别，每次单击一行时，所有行都会重新呈现
const MemoizedItem=备忘录（项目）；
//做一些改变，但行为看起来很奇怪。尝试单击周围并查看日志
const MemoizedItem2=备忘录（项目，项目等式）；
常量项=（{data，selectedItems，onClick}）=>{
console.log（“呈现项”）；
//替换为或看到效果
常量_renderItem=（{item}）=>(
);
返回(
项目.电子邮件}
extraData={selectedItems}
/>
);
};
常量应用=（）=>{
const[items，setItems]=useState（[]）；
const[selectedItems，setSelectedItems]=useState（Set（））；
useffect（（）=>{
const fetchData=async（）=>{
log（“获取数据”）；
//读回5个随机用户
//每个用户都是这样的：
// {
//“性别”：“男性”，
//“姓名”：{
//“头衔”：“先生”，
//“第一”：“哈雷”，
//“最后”：“张”
// },
//“地点”：{
//“街道”：{
//“数字”：6470，
//“名称”：“巴克利路”
//   },
//“城市”：“北帕默斯顿”，
//“州”：“Manawatu Wanganui”，
//“国家”：“新西兰”，
//“邮政编码”：90911，
//“坐标”：{
//“纬度”：“66.2907”，
//“经度”：“-18.0881”
//   },
//“时区”：{
//“偏移量”：“+8:00”，
//“描述”：“北京、珀斯、新加坡、香港”
//   }
// },
//“电子邮件”：“哈雷。zhang@example.com",
//“登录”：{
//“uuid”：“6fda195e-3e63-476c-84d0-7c577c7b74f9”，
//“用户名”：“smallbear541”，
//“密码”：“daisy1”，
//“盐”：“p6AmByUq”，
//“md5”：“0358f2385a9936369adc89b9233f037b”，
//“sha1”：“8decc817cf32ca6e58814502bb3e54152208c5b5”，
//“sha256”：“96FF7627348250646EDD3238504271840A0CB6AAAC293782F7EEC1A6F884C07”
// },
//“dob”：{
//“日期”：“1987-12-07T13:00:15.244Z”，
//“年龄”：33
// },
//“注册”：{
//“日期”：“2008-01-23T19:33:01.672Z”，
//“年龄”：12岁
// },
//“电话”：（474）-743-9612，
//“单元格”：（539）-021-1315“，
//“id”：{
//“名称”：“，
//“值”：空
// },
//“图片”：{
//“大”：https://randomuser.me/api/portraits/men/49.jpg",
//“中等”：https://randomuser.me/api/portraits/med/men/49.jpg",
//“缩略图”：https://randomuser.me/api/portraits/thumb/men/49.jpg"
// },
//“nat”：“新西兰”
// }
常量结果=等待axios（“https://randomuser.me/api/?results=5");
设置项（结果、数据、结果）；
};
fetchData（）；
}, []);
const onClick=id=>{
const newSelectedItems=selectedItems.has（id）
？选择编辑项。删除（id）
：selectedItems.add（id）；
log（`selected items=${JSON.stringify（selectedItems，null，2）}`）；
console.log(
`新选定项=${JSON.stringify（newSelectedItems，null，2）}`
);
设置selecteditems（newSelectedItems）；
}
//无济于事
const onClickUseCallBack=React.useCallback(
id=>{
const newSelectedItems=selectedItems.has（id）
？选择编辑项。删除（id）
：selectedItems.add（id）；
log（`selected items=${JSON.stringify（selectedItems，null，2）}`）；
console.log(
`新选定项=${JSON.stringify（newSelectedItems，null，2）}`
);
设置selecteditems（newSelectedItems）；
},
[selectedItems]
);
返回(
console.log（`Printing selected items${selectedItems}`）}
/>
);
};
导出默认应用程序；
const styles=StyleSheet.create({
容器：{
弹性：1，
marginTop:Constants.statusBarHeight，
marginHorizontal:16
},
项目：{
背景颜色：“f9c2ff”，
填充：20，
利润率：8
}
});

expo package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "expo": "~36.0.0",
    "immutable": "^4.0.0-rc.12",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-elements": "^1.2.7",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "babel-preset-expo": "~8.0.0"
  },
  "private": true
}

---

MomoizedItem

+

onClickUseCallBack

是一个良好的开端

重新渲染

  const onClickUseCallBack = React.useCallback(
    id => {
      setSelectedItems((selectedItems) => {
        const newSelectedItems = selectedItems.has(id)
          ? selectedItems.delete(id)
          : selectedItems.add(id);

        return newSelectedItems
      });
    },
    []
  );

import React, { memo, useEffect, useState } from "react";
import { SafeAreaView, FlatList, StyleSheet } from "react-native";
import Constants from "expo-constants";
import { Set } from "immutable";
import { Button, ListItem } from "react-native-elements";
import axios from "axios";

const Item = ({ id, title, avatarUrl, selected, onClick }) => {
  console.log(`rendering item id=${id}, selected=${selected}`);
  return (
    <ListItem
      title={title}
      leftAvatar={{ source: { uri: avatarUrl } }}
      containerStyle={[
        styles.item,
        { backgroundColor: selected ? "#6e3b6e" : "#f9c2ff" }
      ]}
      underlayColor="transparent"
      onPress={() => onClick(id)}
    />
  );
};
function itemEq(prevItem, nextItem) {
  return prevItem.id === nextItem.id && prevItem.selected === nextItem.selected;
}

// Does not make a difference, every time a row is clicked, all rows are re-rendered
const MemoizedItem = memo(Item);
// Make some difference but the behavior looks very weird. Try click around and see the log
const MemoizedItem2 = memo(Item, itemEq);

const Items = ({ data, selectedItems, onClick }) => {
  console.log("rendering items");
  // Replace <Item /> with <MemoizedItem /> or <MemoizedItem2 /> to see effect
  const _renderItem = ({ item }) => (
    <MemoizedItem
      id={item.email}
      title={`${item.name.title} ${item.name.first} ${item.name.last}`}
      avatarUrl={item.picture.thumbnail}
      selected={selectedItems.has(item.email)}
      onClick={onClick}
    />
  );
  return (
    <FlatList
      data={data}
      renderItem={_renderItem}
      keyExtractor={item => item.email}
      extraData={selectedItems}
    />
  );
};

const App = () => {
  const [items, setItems] = useState([]);
  const [selectedItems, setSelectedItems] = useState(Set());

  useEffect(() => {
    const fetchData = async () => {
      console.log("fetching data");
      // Read 5 random users back
      // Each user is like this:
      // {
      //   "gender":"male",
      //     "name":{
      //   "title":"Mr",
      //       "first":"Harley",
      //       "last":"Zhang"
      // },
      //   "location":{
      //   "street":{
      //     "number":6470,
      //         "name":"Buckleys Road"
      //   },
      //   "city":"Palmerston North",
      //       "state":"Manawatu-Wanganui",
      //       "country":"New Zealand",
      //       "postcode":90911,
      //       "coordinates":{
      //     "latitude":"66.2907",
      //         "longitude":"-18.0881"
      //   },
      //   "timezone":{
      //     "offset":"+8:00",
      //         "description":"Beijing, Perth, Singapore, Hong Kong"
      //   }
      // },
      //   "email":"harley.zhang@example.com",
      //     "login":{
      //   "uuid":"6fda195e-3e63-476c-84d0-7c577c7b74f9",
      //       "username":"smallbear541",
      //       "password":"daisy1",
      //       "salt":"p6AmByUq",
      //       "md5":"0358f2385a9936369adc89b9233f037b",
      //       "sha1":"8decc817cf32ca6e58814502bb3e54152208c5b5",
      //       "sha256":"96ff7627348250646edd31238504271840a0cb6aaac293782f7eec1a6f884c07"
      // },
      //   "dob":{
      //   "date":"1987-12-07T13:00:15.244Z",
      //       "age":33
      // },
      //   "registered":{
      //   "date":"2008-01-23T19:33:01.672Z",
      //       "age":12
      // },
      //   "phone":"(474)-743-9612",
      //     "cell":"(539)-021-1315",
      //     "id":{
      //   "name":"",
      //       "value":null
      // },
      //   "picture":{
      //   "large":"https://randomuser.me/api/portraits/men/49.jpg",
      //       "medium":"https://randomuser.me/api/portraits/med/men/49.jpg",
      //       "thumbnail":"https://randomuser.me/api/portraits/thumb/men/49.jpg"
      // },
      //   "nat":"NZ"
      // }
      const results = await axios("https://randomuser.me/api/?results=5");
      setItems(results.data.results);
    };
    fetchData();
  }, []);

  // Does not help
  const onClickUseCallBack = React.useCallback(
    id => {
      setSelectedItems((selectedItems) => {
        const newSelectedItems = selectedItems.has(id)
          ? selectedItems.delete(id)
          : selectedItems.add(id);

        return newSelectedItems
      });
    },
    []
  );

  return (
    <SafeAreaView style={styles.container}>
      <Items data={items} selectedItems={selectedItems} onClick={onClickUseCallBack} />
      <Button
        title="Print"
        onPress={() => console.log(`Printing selected items ${selectedItems}`)}
      />
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
    marginHorizontal: 16
  },
  item: {
    backgroundColor: "#f9c2ff",
    padding: 20,
    marginVertical: 8
  }
});