有这么个组件，循环了一个子组件10000次
state = {
currentIndex: 0
}
handleClick = (index) => {
const { text, helloWorldActons } = this.props
this.setState({
currentIndex: index
}, () => {
helloWorldActons.changeText(Math.random(), index)
})
}
renderList(handle, text) {
var lists=[]
for(let i = 0; i <10000; i++){
lists.push( <PerformanceDemo onClick={() => {this.handleClick(i)} } text={text} key={i} currentIndex={this.state.currentIndex} index={i} />)
}
return lists
}
render() {
const { text, helloWorldActons } = this.props
return (
<div>
Home
<p>
<Link to='./about'>about</Link>
</p>
{ this.renderList(helloWorldActons.changeText, text) }
</div>
)
}
如果不在组件中做优化时，每次都去渲染每一个组件，那么，在开发模式下，性能如下
image.png
1.开发模式下不做任何优化，js脚本很耗性能
接下来，我们在开发模式下，优化下性能，只渲染当前点击的组件
image.png
2.开发模式下，做了优化之后，脚本执行时间大大减少，render时间要大大减少
接下来，我们在生产模式下，看看不优化的结果
image.png
3.生产模式下，不做优化，影响了render的性能
再来看看，生产模式做了优化的结果
image.png
4.生产模式优化之后，各种指标全部上升
这里插播一句，一般我们做优化都是在shouldComponentUpdate中判断，这个时候，尽管我们的条件已经达到了优化的结果，但是，假如，在这个方法执行很多次，并且在里面打印一条console.log时，也很耗时间，切记
接下来，我们来手动做操作，看看结果如何
var text = '测试'
function createDom2(text) {
var html = '<div>'
html += '<button> change text</button>'
html += '<div>' + text + '</div>'
html += '</div>'
return html
}
function render() {
var html = ''
for (var i = 0; i < 10000; i++) {
html += createDom2(text)
}
document.body.innerHTML = html
}
render()
document.body.addEventListener('click', function() {
text = Math.random()
render()
})
image.png
由这个分析结果，其实不好给结论，假如按照本demo中的比较来看，这个是高于react开发模式的性能的，但是跟生产模式来看，性能还是欠缺，所以，虚拟dom对性能的处理还是比较不错的
