react-native - 反应原生 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)}
    />
  )
};

标签： react-nativeexpo

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} />}
    />
  )
};