React Native | Rerender Flatlist

问题

I have a list: data. Then when I update the list, it renders all the elements again. For example, let's say there are 10 items. One of these has changed. 10 items are rendering again. But since 9 of them are the same, they should not be rendered again. How can I do?

const Item =({item}) => (
   <Text>{item.name}</Text>
)

const List = () => {
  const [data, setData] = useState([..]);

  return (
     <FlatList
        data={data}
        renderItem = {Item}
     >
)}
export default List;

回答1:

You have to use extraData prop of Flatlist

According to docs:

By passing extraData={this.state} to FlatList we make sure FlatList will re-render itself when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.

Or you can implement shouldComponentUpdate inside your renderitem component and place a check when you wanted to render your component.

来源：https://stackoverflow.com/questions/65034994/react-native-rerender-flatlist