使用 ReactJS 声明函数组件时

Question

所以我看到人们使用不同的方式来声明一个函数。但是，我看到了一种我不太理解的方式。示例代码如下：

type Props = { 
    name: string,
    age: number
}

const someFunction = ({
    name,
    age
}: Props) => {
   return (
    // Do something here
   )
}

所以我知道这里的代码首先是创建一个带有名称和年龄的 Props 对象。我没有得到的部分是它显示({name, age}: Props) 的部分。我猜这是一个将状态映射到道具的参数，但我不确定。谁能解释一下？

Answer 1

它被称为Destructuring Assignment。这是一种 ES6 语法。

它存在于arrays 和objects。

它基本上是一种提取数组/对象的一部分的方法。

在执行{ name, age } = props 时，您从通常称为props 的对象中提取 name 和age。

使用解构：

const someFunction = ({
    name,
    age
}: Props) => {
  console.log(name, age)
}

没有解构：

const someFunction = (props: Props) => {
  const name = props.name
  const age = props.age

  console.log(name, age)  
}