反应原生 |重新渲染平面列表

Question

我有一个列表：数据。然后当我更新列表时，它会再次呈现所有元素。例如，假设有 10 个项目。其中之一发生了变化。 10 个项目再次渲染。但由于其中 9 个是相同的，因此不应再次渲染。我该怎么办？

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

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

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

Answer 1

你必须使用 extraData 的 Flatlist 属性

根据文档：

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.

或者您可以在 renderitem 组件中实现 shouldComponentUpdate 并在您想要渲染组件时进行检查。