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 的值