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

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

这是完整的方法签名

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

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

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

Answer 2

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

如果你有一个带参数的函数 (a,b,c) => {}

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

如果函数 ({a,b,c}) => {}

你可以给他们 a 和 c 不提 b，不记得他们的顺序。 此外，在框架的下一个版本中，您可以轻松地折旧和添加新参数，因此这种模式具有一些优势。

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 属性更重要，它保存了从数据数组传递给函数 param 的值