解构变量性能

Question

编写之间是否存在性能差异（如果有）

const color = props.color;

与

const { color } = props;

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

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

功能性反应组件示例：

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>;
};

Answer 1

由于您的代码将被编译/缩小，因此不会有任何性能问题。

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

const color = props.color

在babel编译器在线测试仪上检查结果