在 React 组件中使用扩展语法时顺序重要吗？

Question

我们在使用 {...Input} 的 react 组件中使用展开运算符，它也有 onChange 方法，那么我们的自定义 onChange 需要写在展开之前还是展开运算符之后？

我们使用展开运算符时顺序重要吗？方法覆盖是否在这里完成？

表示在性能和语法方面正确有效且首选的编写方式。

<Input type='text' {...input} onChange={onChange} />

或

<Input type='text' onChange={onChange} {... input} />

很抱歉将 2 3 个问题混在一起，请不要将其标记为未批准或投票关闭。现在，在 SO 中提问变得困难了。哈哈

我也在寻找在 React Component 中将 spread item 写在第一位或最后一位的一般做法，有任何 lint 规则吗？

Answer 1

{...Input} which also have onChange method

那么顺序很重要。后一个覆盖前一个。

which is correct and valid and preferred way to write, In terms of performance and syntax.

没有性能差异。顺序取决于您的需要。如果你想覆盖 onChange 使用这个：

<Input type='text' onChange={onChange} {... input} />

Answer 2

是的，这很重要。

<Input type='text' {...input} onChange={onChange} />

在这种情况下，"input" 内部的 "onChange" 方法将被其外部的 "onChange" 覆盖。在另一种情况下，反之亦然。

我想取决于你想覆盖哪一个，你可以把它放在输入中，比如：

input = {...input, onChange}
Or
input = {onChange, ...input}

<Input type='text' {...input}  />

Does order matter when using spread syntax in React component?