React Native--FlatList 进阶范例

Question

我已经使用 React 创建了一个游戏，现在我正在尝试对我的代码和样式进行必要的更改，以便游戏通过 ReactNative 在移动设备上运行。以下代码来自关于 FlatList 的官方指南。

1. class MyList extends React.PureComponent { 
2. state = {selected: (new Map(): Map<string, boolean>)}; 
3. _keyExtractor = (item, index) => item.id; 
4. _onPressItem = (id: string) => {  
// updater functions are preferred for transactional updates
5. this.setState((state) => {  
// copy the map rather than modifying state.
6. const selected = new Map(state.selected); 
7. selected.set(id, !selected.get(id)); // toggle
8. return {selected}; }); };

虽然我之前用过 es6 箭头函数和 Maps，但老实说，我很难理解以下两种情况下使用的语法：

a) 第 2 行：(new Map(): Map<string, boolean>) 假设 return 是什么？

b) 第 4 行：一个以...符号作为参数的箭头函数？为什么？

Answer 1

第 2 行，仅使用 Map 类型初始化状态（请参阅此处的 Map：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)

new Map() 是创建 Map 的方法，后面的部分是 "Flow" 类型规范。它是 Facebook 自己的 Javascript 静态类型检查器库（参见此处：https://flow.org/en/docs/types/arrays/）

Maps 类似于 JS 中的对象，但它们有区别，例如，键可以是任何东西，它们是可迭代的，它们可以更大，等等。

第 4 行：正如您在 Flow 中看到的，您可以在参数上指定类型，所以你基本上期望 "id" 应该是一个字符串

React Native--FlatList 进阶范例

React Native-- advanced example on FlatList

react-native

react-native-flatlist