反应本机 flatlist usememo 不工作

Question

我听说我应该避免重新渲染。那么为什么这段代码不起作用？

RenderItem 不是函数。

import React, { memo, useMemo } from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, TouchableOpacity, Image, Dimensions } from 'react-native';

const Shopping_cart = ({ datas, onPressSetting }) => {
  const RenderItem = useMemo((item) => {
    return (
      <Text>Hello</Text>
    )
  }, [datas]);
  return (
    <FlatList 
      data={datas}
      keyExtractor={item => item.item.product_id}
      renderItem={({ item }) => RenderItem(item)}
    />
  )
};

Answer 1

尝试将 RenderItem 作为组件传递。

例子

import React, { memo, useMemo } from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, TouchableOpacity, Image, Dimensions } from 'react-native';

const Shopping_cart = ({ datas, onPressSetting }) => {
  const RenderItem = useMemo(({item}) => {
    return (
      <Text>{item.title}</Text>
    )
  }, [datas]);
  return (
    <FlatList 
      data={datas}
      keyExtractor={item => item.item.product_id}
      renderItem={({ item }) => <RenderItem item={item} />}
    />
  )
};

反应本机 flatlist usememo 不工作

react native flatlist usememo not working

react-native

expo