问题:
- 当调用setState是都会执行render(),即使数据不发生改变也会重新渲染页面=>降低效率
- 当触发render()时即使父组件不与子组件交互也会导致子组件的刷新=>降低效率
原因:
在react生命周期中有一个钩子(shouldComponentUpdata),它是控制组件更新的阀门,该生命周期默认返回true即可以更改数据,之后触发render
解决思路:
只有当数据发生改变时才会经过shouldComponentUpdata,数据不发生改变是设置shouldComponentUpdata为false,使过程不再往下进行,不调用render()
解决办法(重写shouldComponentUpdata):
方法一:比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
方法二:使用PureComponent,PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true(项目中一般使用)