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>) 假设返回什么？

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/）

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

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