React组件性能优化

在react开发过程中，会遇到组件性能优化的问题，小项目可能不会表现的特表明显，在项目较大的情况下，如果不进行性能优化处理，就有可能出现卡顿。

业务场景

在许多公司react的面试中会要求面试者手写或者上机写一个todoList的小案例，在这个案例中，父组件可能需要嵌套多个子组件，在性能优化之前，每当父组件进行更新，子组件不需要更新的情况下，子组件的render函数都会被调用，一旦组件增多，性能上就会出现很大的问题。

优化方案

我们可以在子组件的shouldComponentUpdate生命周期函数进行校验。

shouldComponentUpdate(nextProps,nextState){
    // nextProps表示父组件传递到子组件将要更新的数据对象
    // nextState表示当前组件将要更新的状态

    // content是父组件传递给子组件的数据    if(nextProps.content != this.props.content){        return true        }else {        return false    }  }

如上诉代码所示，如果子组件将要更新的数据与原数据相同，子组件就没有更新的必要，返回false，render函数不再执行，而当子组件将要更新的数据和原数据不同，就必须进行更新，返回true，执行子组件的render函数。

总结

该文章只是指出了优化方案中特别需要注意的，主要目的还是记录学习react的知识点，方便日后学习查看，如有侵权，请联系作者删除，转载请放上链接，谢谢。