解构变量性能 [英] Destructuring Variables Performance

问题描述

写作之间是否存在性能差异

Is there a performance difference, if any, between writing

const color = props.color;

vs

const { color } = props;

---

此外，如果我们在参数签名中进行结构分解，我们是否会获得或失去任何性能?参见example3

---

Also, do we gain or lose any performance if we destructure in the parameters signature? See example3

我认为在这种情况下，example3是编写函数的最佳方法吗?

I assume example3 in this situation would be the best way to write the function?

示例功能性反应组件:

const example1 = (props) => {
  const color = props.color;
  // I know I could also just write style={{ color: props.color }}
  // but for arguments sake lets say I want to write it like this.
  return <h1 style={{ color }}>Hello</h1>;
};

const example2 = (props) => {
  const { color } = props;
  return <h1 style={{ color }}>Hello</h1>;
};

const example3 = ({ color }) => {
  return <h1 style={{ color }}>Hello</h1>;
};

推荐答案

不会有任何性能问题，因为您的代码将被编译/缩小等.

There won't be any performance issues as your code will be compiled/minify and so on.

请注意，使用React，您的代码将被转译，其作用与

Note that with React, your code will be transpiled which will do the same as

const color = props.color

在 查看全文