使用shouldComponentUpdate( ) 生命周期函数,减少render函数的执行,减少对未发生改变的DOM结点的重复渲染。
shouldComponentUpdate(nextProps, nextState) {
if(nextProps.content !== this.props.content) {
return true
}else {
return false
}
}
render() {
console.log('child render')
const { content } = this.props
return (
<li onClick={this.handleClick}>
{ content }
{/* { this.props.content } */}
</li>
)
}
若从父组件传来的content内容未发生改变则返回false(此部分查看React中生命周期函数文章)
原文地址:https://www.cnblogs.com/nayek/p/12364702.html
时间: 2024-10-05 23:54:14