Question

此代码

const foo = {props: {a: 'b'}};

const bar = (props) => {console.log({new: 'object', props})}

bar(foo)

如果我将(props) =>更改为({...props}) =>，则会得到相同的准确输出

这里到底发生了什么？

我问的原因是因为我在React中使用纯组件做类似的事情。

 export default ({ ...props }) => (
  <BaseLayout {...props} theme={defaultTheme} />
);

如果我在参数中删除了传播运算符，则该组件将不再呈现。

如果有人能准确解释两个示例中发生的事情，以及JSX代码和常规javascript之间有任何区别，我将不胜感激。

Answer 1

它会像Object.assign()一样创建对象的浅表克隆，但使用的方法更简洁。