react-native - react native usememo renderitem 为什么不起作用？

Question

我想防止不必要的重新渲染，所以我使用了 useMemo。

但我收到了这个错误信息：

TypeError: renderItem is not a function. (In 'renderItem(props)', 'renderItem' is an instance of Object)

代码：

import * as React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image, Dimensions, FlatList } from 'react-native';
import faker from 'faker';

const { width, height } = Dimensions.get('window');

const Advertising = () => {
  const data = [
    { id: '1', name: 'Jens', image: faker.image.avatar() },
    { id: '2', name: 'Günther', image: faker.image.avatar() }
  ];

  const renderItem = React.useMemo(() => {
    return (
      <View>
        <Text>Hello</Text>
      </View>
    )
  }, [data]);

  return (
    <FlatList
      data={data}
      keyExtractor={item => Math.random(100).toString()}
      renderItem={renderItem}
    />
  )
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});

export default React.memo(Advertising);

..................................................... ..................................................... ..................................................... ...................................................

Answer 1

useMemo是一个反应钩子，反应钩子不能以这种方式使用。

我建议您为此创建一个单独的组件。

const MyComponent = React.memo(({item})=>{
   return (<View></View>);
});

然后像这样导入

const renderItem = ({item}) => {
  return <MyComponent />
}
...
<FlatList 
data={data}
renderItem={renderItem}
keyExtractor={(_item, i)=>i.toString()}
/>

还要考虑 useCallBack