Component的2个问题与原因及其组件优化

Component的2个问题

1. 只要执行 setState()，即便不改变状态数据，组件也会重新render() ===> 效率低
2. 只当前组件重新 render()，就会自动重新渲染子组件，纵使子组件没有用到父组件的任何数据 ===> 效率低

效率高的做法

只有当组件的state或props数据发生改变时才重新render()

原因

Component 中的 shouldComponentUpdate() 总是返回 true

解决方法

方法一：重写 shouldComponentUpdate() 方法

比较新旧 state 和 props 数据，如果变化才返回 true，没有变化则返回 false

shouldComponentUpdate(nextProps, nextState) {
	console.log(this.props,this.state)	// 目前props和state
	console.log(nextProps, nextState)	// 接下来变化的目标props和state
	return !this.state.A === nextState.A
}

方法二：使用 PureComponent

PureComponent 重写 shouldComponentUpdate() 方法，只有 state 和 props 数据变化才返回true

注意：

  1. 只是进行 state 和 props 数据的浅比较，如果只是数据对象内部数据变了，返回 false
  2. 不要直接修改 state 数据，而是要产生新数据

项目中一般使用 PureComponent 来优化

import React, { PureComponent } from 'react'
...
export default class Demo extends PureComponent {
	...
}