Javascript 函数参数中的对象或解构

Question

在 React Native FlatList 文档中，使用了以下示例：

_renderItem = ({item}) => (
    <MyListItem
      id={item.id}
      onPressItem={this._onPressItem}
      selected={!!this.state.selected.get(item.id)}
      title={item.title}
    />
  );
  render() {
    return (
      <FlatList
        data={this.props.data}
        extraData={this.state}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      />
    );
  }

有人可以向我解释为什么"项目"在第一行用大括号包裹吗？项目是否被解构了？为什么不将项目作为普通参数传递（用括号括起来或不用括号括起来，因为它只是一个参数）？

Answer 1

这是一个约定，可能具有以下原因：

如果你有一个参数为 （a，b，c） => {} 的函数

您受到这些顺序的限制，当您要添加下一个参数时，您需要更改函数的接口。

在函数 （{a，b，c}） 的情况下 => {}

你可以让他们 A 和 C 不提及 B，也不记得他们的顺序。此外，在框架的下一版本中，您可以轻松折旧和添加新参数，因此此模式具有一些优势。

Answer 2

根据 React Native 文档，您正确地指出正在发生对象解构。

这是完整的方法签名

renderItem({ item: Object, index: number, separators: { highlight: Function, unhighlight: Function, updateProps: Function(select: string, newProps: Object) } })

对于 data prop 中提供的每个元素，FlatList 会将这些数据打包到一个对象中，然后使用此对象作为参数调用renderItem

回答你为什么的问题：丹尼尔很好地解释了它。它归结为可以传递给 renderItem 函数的可变数量的参数，例如是否需要覆盖FlatList中的元素何时更新。因此，您将使用传递的updateProps函数。

Answer 3

原因是因为您正在请求该特定项目，例如导入模块

import React, { Component } from 'react';

然后你可以直接打电话extends Component

如果你不使用它，你需要

import React form 'react'; 
//or
import * as React from 'react';

您需要"查找"组件extends React.Component的位置

与 flatlist 相同，您可以导入({item , index})并通过键入 item 或 ìndex （对于索引）来调用它

或者你可以导入整个对象(Object)，并用Object.item调用它，也可以这样调用索引Object.index

Answer 4

函数参数保存即将输入的项目的信息。 因此，每个项目都有以下信息：

{ item: Object, index: number, separators: { highlight: Function, unhighlight: Function, updateProps: Function(select: string, newProps: Object) } }

完成解构是因为只有 info 对象中的 item 属性更重要，它保存从数据数组传递给函数参数