在React子组件函数中传递props作为参数时为什么要加花括号

这个是ES6对象解构赋值的语法，和React本身的规则无关，本质是简化props属性的读取操作，原理如下：

• React的函数组件固定只会接收1个参数，这个参数是所有传入属性组成的props对象。你示例中给<Person />传了name="John"，那组件实际收到的入参就是{ name: "John" }这个对象。
• 如果你不加花括号，写法就是下面这样，需要通过props.属性名的方式读取对应值：

// 不加花括号的写法
const Person = (props) => {
  return <div><h1>My name is {props.name}.</h1></div>
}

• 加花括号的写法，就是在入参阶段直接把props对象里的对应属性解构出来赋值给变量，省掉了后续每次写props.的步骤，等价于在函数内部先做了解构操作：

// 加花括号的写法，等价于下面注释里的写法
const Person = ({name}) => {
  // 相当于内部隐式写了 const { name } = props
  return <div><h1>My name is {name}.</h1></div>
}

两种写法都可以正常运行，你可以根据实际场景选择：

• 如果组件接收的属性少、不需要用到完整的props对象，直接入参解构更简洁
• 如果组件属性很多、或者需要把整个props透传给下层组件，就可以直接接收整个props对象不做解构

补充注意：你示例中<Person name={"John"} />里的花括号是JSX的语法规则，标识内部是JavaScript表达式，和入参的解构花括号是完全不同的语法，不要混淆。

内容的提问来源于stack exchange，提问作者user15793040