Question

我可能不完全理解当状态改变时 react-native 组件重新渲染的情况。

我有一个名为 MyFlatList 的自定义 FlatList 组件......它是更大屏幕组件的子级。

我按照下面的方法将 redux 值传递到 MyFlatList 中

const mapStateToProps = state => ({
  rdx_places: state.places,
});

....然后我在 FlatList 的 renderItem 道具中使用它，如下所示

renderItem={({item}) => { 
let placeName = this.props.rdx_places[item.place_id].placeName;

...然后我在 return 语句中使用从 redux 中提取的变量

return (variable placeName used here)

当我触发操作创建者更改 redux 状态时 (state.places)..我可以看到它成功更新了 Redux 中的状态....但是 FlatList 没有重新渲染。

有趣的是，父组件确实会重新渲染（父组件也通过 mapStateToProps 将相同的状态传递给它）

Answer 1

来自 FlatList 的文档

<块引用>

额外数据

一个标记属性，用于告诉列表重新渲染（因为它实现了PureComponent）。如果您的任何 renderItem、Header、Footer 等函数依赖于 data prop 之外的任何内容，请将其粘贴在这里并保持不变。

您的 FlatList 依赖于该更改并且应该导致 FlatListe 重新呈现的任何数据依赖项必须由 extraData 提供。

因此，您通过将数据提供给 data 来提供数据，然后将可能更改的状态传递给 extraData。然后，每当 extraData 发生变化时，组件就会重新渲染。