gpt4 book ai didi

javascript - 您应该在构造函数中定义组件状态的所有属性吗?

转载 作者:可可西里 更新时间:2023-11-01 02:42:59 24 4
gpt4 key购买 nike

所以我读完了this article它基本上讨论了 v8 和其他 javascript 引擎如何在内部缓存对象的“形状”,以便当他们需要重复访问对象的特定属性时,他们可以只使用直接内存地址而不是查找该对象内存中的位置该特定属性是。

这让我想到,在 React 中,您经常在构造函数中声明组件的状态,但不包括最终将包含在状态中的所有属性,例如:

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
hasLoaded: false
};
}

componentDidMount() {
someAjaxRequest.then((response) => {
this.setState({
content: response.body,
hasLoaded: true
});
});
}

render() {
return this.state.hasLoaded ?
<div>{this.state.content}</div> :
<div>Loading...</div>;
}
}

既然根据这篇文章,状态对象不会保持一致的结构,那么做这样的事情会比在构造函数中定义所有可能的状态字段效率低吗?您是否应该始终至少添加所有属性,甚至为它们赋予 null 值,以便对象始终保持一致? 它会以任何实质性方式影响性能吗?

最佳答案

TL;DR 性能提升似乎微不足道,不值得。

测试设置:

我做了10万个这个类的 child :

import React, { Component } from 'react';

const getRand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

class Child extends Component {
constructor() {
super();
this.state = {
loading: false,
};
}

componentDidMount() {
const key = getRand(1, this.props.numKeys);
this.setState({
key,
[key]: 'bar',
});
}

render() {
if (this.props.display) {
return <div>child {this.state.key} {this.state[this.state.key]}</div>
}
return <div>child 0</div>
}
}

export default Child;

children 制作如下:

const children = [];
for (let i = 0; i < 1 * 100 * 1000; i++) {
children.push(<Child display={true} numKeys={1000} key={i} />);
}
return (
<div>
{children}
</div>
);

想法是:我可以传入 display 属性来为每个 child 呈现相同的 HTML,或者呈现不同的 HTML。

我还传入了一个 numKeys 来确定对象上应该有多少种不同类型的键。经过测试,display 属性并没有显着影响 DOM 渲染时间,所以我没有在下面报告。所有测试均通过 create-react-app

使用 yarn build && serve -s build 运行

结果

所有 child 的 key 都一样

Same key for all children

所有 child 的 3 把 key

3 keys for all children

10把 key 给所有 child

10 keys for all children

所有 child 1000把 key

1000 keys for all children*Chrome 67.0.3396.99 中的所有测试

如您所见,在拥有大量不同形状的物体之前,100,000 个物体的性能可以忽略不计。即便如此,您的性能提升还是超过 100,000 个组件 700 毫秒,或每个组件 7 微秒。这肯定不是声称的 8 倍加速。

此外:您的渲染时间可能会被 DOM 操作在任何现实的情况下相形见绌,而不是像这个测试那样合成。

关于javascript - 您应该在构造函数中定义组件状态的所有属性吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51333026/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com