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道具中提供的每个元素，FlatList会将数据打包到一个对象中，然后将以该对象作为参数调用renderItem

回答您的问题原因：Daniel很好地解释了它。它取决于可以传递给renderItem函数的可变数量的参数，例如，当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的值

Javascript函数参数中的对象或结构？

4 个答案: