写作之间是否有性能差异
const color = props.color;
VS
const { color } = props;
另外,如果我们在参数签名中进行结构化,我们是否会获得或失去任何表现?见例3
我认为在这种情况下,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>;
};
答案 0 :(得分:9)
编译器/编译器不一定会删除解构赋值,因为所有常绿浏览器自2020年起都支持本机解构。根据,有证据表明,至少到2018年,V8中由解构赋值生成的字节码。比传统的函数参数更冗长:
功能参数:
function add(number1, number2){
return number1 + number2;
}
const result = add(1,5);
输出字节码:
[generating bytecode for function: add]
Parameter count 3
Frame size 0
74 E> 0x2a2a0affd2a2 @ 0 : 91 StackCheck
96 S> 0x2a2a0affd2a3 @ 1 : 1d 02 Ldar a1
111 E> 0x2a2a0affd2a5 @ 3 : 2b 03 00 Add a0, [0]
121 S> 0x2a2a0affd2a8 @ 6 : 95 Return
Constant pool (size = 0)
Handler Table (size = 16)
结构化分配:
function add({number1, number2}){
return number1 + number2;
}
const result = add({number1: 1, number2: 5});
输出字节码:
[generating bytecode for function: add]
Parameter count 2
Frame size 40
74 E> 0x2c1d63b7d312 @ 0 : 91 StackCheck
0x2c1d63b7d313 @ 1 : 1f 02 fb Mov a0, r0
0x2c1d63b7d316 @ 4 : 1d fb Ldar r0
0x2c1d63b7d318 @ 6 : 89 06 JumpIfUndefined [6] (0x2c1d63b7d31e @ 12)
0x2c1d63b7d31a @ 8 : 1d fb Ldar r0
0x2c1d63b7d31c @ 10 : 88 10 JumpIfNotNull [16] (0x2c1d63b7d32c @ 26)
0x2c1d63b7d31e @ 12 : 03 3f LdaSmi [63]
0x2c1d63b7d320 @ 14 : 1e f8 Star r3
0x2c1d63b7d322 @ 16 : 09 00 LdaConstant [0]
0x2c1d63b7d324 @ 18 : 1e f7 Star r4
0x2c1d63b7d326 @ 20 : 53 e8 00 f8 02 CallRuntime [NewTypeError], r3-r4
76 E> 0x2c1d63b7d32b @ 25 : 93 Throw
76 S> 0x2c1d63b7d32c @ 26 : 20 fb 00 02 LdaNamedProperty r0, [0], [2]
0x2c1d63b7d330 @ 30 : 1e fa Star r1
85 S> 0x2c1d63b7d332 @ 32 : 20 fb 01 04 LdaNamedProperty r0, [1], [4]
0x2c1d63b7d336 @ 36 : 1e f9 Star r2
98 S> 0x2c1d63b7d338 @ 38 : 1d f9 Ldar r2
113 E> 0x2c1d63b7d33a @ 40 : 2b fa 06 Add r1, [6]
123 S> 0x2c1d63b7d33d @ 43 : 95 Return
Constant pool (size = 2)
Handler Table (size = 16)
字节代码行的数量从功能参数的4个显着增加到结构化分配的19个。综上所述,截至2018年,V8中的非结构化分配比传统函数参数的计算效率更低。就内存空间利用率而言,答案要复杂一些,可以参考here。
这可能是过早的优化,但是在计算繁重的代码时,建议不要使用解构分配。
答案 1 :(得分:3)
由于您的代码将被编译/缩小等等,因此无法解决任何性能问题。
请注意,使用React,您的代码将被转换为与
相同的代码 const color = props.color