React拓展6-PureComponent

用于避免重复渲染（执行render函数），提高效率

Component的2个问题

1. 当组件中运行方法setState({})。哪怕该方法的参数为一个空对象，该组件和其子组件都会被重新渲染

2. 只当前组件重新render(), 就会自动重新render子组件 ==> 效率低

效率高的做法

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

原因

• Component中的shouldComponentUpdate()总是返回true

解决方法

办法1:
重写shouldComponentUpdate()方法
比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
办法2:
使用PureComponent
PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
注意:
只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false
不要直接修改state数据, 而是要产生新数据
项目中一般使用PureComponent来优化

（1）PureComponent来自于React组件库
（2）PureComponent有一个问题，如果setState的参数与this.state是同一个对象的话，也不会更新组件。需要使用纯函数

state = {
  username: "Tom",
};
handExchange = () => {
  let obj = this.state;
  obj.username = "jack"
  this.setState({ obj });
};
shouldComponentUpdate(nextProps, nextState) {
  console.log(nextProps);
  console.log(nextState);
  return true;
}

应当改为

state = {
  username: "Tom",
};
handExchange = () => {
  let {username} = this.state;
  username = "jack"
  this.setState({ username });
};
shouldComponentUpdate(nextProps, nextState) {
  console.log(nextProps);
  console.log(nextState);
  return true;
}