从零开始学习React——(十六)：利用React生命周期优化组件

通过上一节，对于React生命周期有了新认识，如何利用它来提高组件的性能呢？本节将会抛砖引玉讲解一个小例子。为了代码的清晰，可以删除上一节一些无关的生命周期函数代码。

1. ChildItem.js存在性能问题

那就是：子组件ChildItem.js频繁无用渲染render。

很多情况下会忽略这个问题，但是软件的卡顿是一点点产生的，所以必须要减少性能消耗。

解决方式

直接在ChildItem.js中加入如下代码

	shouldCompnentUpdate() {
        return false
    }

这个时候回浏览器查看，问题已经没有了。但是这样做太暴力了。如果真实项目中需要改变值和属性值，达到渲染就没办法了。所以可以更优雅一点，采用如下方式：

shouldComponentUpdate 有两个参数：

• nextProps：变化后的属性
• nextState：变化后的状态

	shouldCompnentUpdate(nextProps, nextState) {
        if (nextProps.content !== this.props.content) {
            return false
        } else {
            return true
        }
    }