JS箭头函数参数带{}与不带{}的区别及React组件参数解构问题

问题1：const thisFunction = () => {} 和 const thisFunction = ({}) => {}的区别 #

• 前者是无参数箭头函数，调用时不需要传参，即使传入参数也不会被函数接收，不会做任何参数校验，任意调用形式都不会触发参数层面的报错。
• 后者是接收单个对象参数并进行空解构的箭头函数，形参位置的{}是JS对象解构语法，要求调用时必须传入一个可解构的对象类型值：
  • 调用时不传参、传undefined/null都会直接抛出类型错误
  • 只有传入对象类型的值（包括空对象{}）才能正常执行

问题2：React函数组件中({thread})的相关说明 #

这里的thread是对组件props对象的解构取值，属于对象解构的一部分：

• React函数组件默认只会接收1个参数，就是父组件传递的所有属性组成的props对象
• 形参位置的大括号是JS参数解构语法的一部分，属于参数声明范畴，作用是直接从props对象里提取名为thread的属性，赋值给当前作用域下的thread变量，等价于下面的写法：

const ChatThread = (props) => {
  const thread = props.thread
  return <div></div>
}

问题3：去掉参数大括号后报错的原因 #

如果把形参写成(thread)，此时函数接收的thread是完整的props对象，而不是props里的thread属性：

• 比如父组件调用时写的是<ChatThread thread={threadData} />，实际传递给组件的参数是{thread: threadData}
• 如果你直接使用thread变量下的属性，实际访问的是props对象下的属性，而不是你预期的threadData下的属性，自然会出现取值错误
• 如果不想用解构写法，需要调整取值逻辑为thread.thread才能拿到对应的数据

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