Javascript 传递一个已分解的对象？

因此，今天在阅读React原生文档时，我遇到了这段代码，我们实际上是将{item}作为分解结构传递。

---

我确实读过一点关于解构的内容，我知道它是如何工作的，但我不明白我们是如何将它作为解构传递给函数的，以及为什么要这样做。

这是flatlist的默认行为，其中项是传递到渲染函数的道具的一部分

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>

通过使用上述工具，您可以查看渲染道具内部的内容。这个项目只是它的一部分

---

如果不解构，则必须使用props.item而不是item。

这是flatlist的默认行为，其中item是传递到渲染函数的props的一部分

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>

通过使用上述工具，您可以查看渲染道具内部的内容。这个项目只是它的一部分

---

如果不解构，则必须使用props.item而不是item。

原因：他们这样做可能只是为了减少访问对象属性的噪音

 renderItem={(props) => console.log(props)}

---

如何：如果您理解了解构，您就理解了如何：它本质上是使用语法糖从参数中的对象中提取值，而不是稍后在函数体中提取值。

原因：他们这样做可能只是为了减少访问对象属性的噪音

 renderItem={(props) => console.log(props)}

如何：如果您理解了解构，那么您就理解了如何：它本质上是使用语法sugar从参数中的对象中提取值，而不是稍后在函数体中提取值

我不明白我们是如何将它作为解构传递给函数的

它没有被分解传递。函数会在收到时对其进行分解。此代码：

renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
// could also be written as
renderItem={(props) => <Text style={styles.item}>{props.item.key}</Text>}

我不明白我们是如何将它作为解构传递给函数的

它没有被分解传递。函数会在收到时对其进行分解。此代码：

renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
// could also be written as
renderItem={(props) => <Text style={styles.item}>{props.item.key}</Text>}