一、React.PureComponent简介
React.PureComponent是一种优化React应用性能的方式，它可以进行浅比较（shallow compare）从而减少不必要的渲染。React.PureComponent继承自React.Component，并实现了shouldComponentUpdate方法，会在渲染之前进行props和state的浅比较，如果没有改变则不进行渲染。因为React.PureComponent只会在props或state改变时才会重新渲染，所以它可以实现对React应用的优化。
二、React.PureComponent与React.Component的区别
React.PureComponent与React.Component的最大区别就在shouldComponentUpdate方法的实现上。如果需要使用React.Component实现shouldComponentUpdate的时候，需要手动比较props和state的改变情况，而React.PureComponent则会自动实现这一过程，大大减少了手动实现shouldComponentUpdate所带来的工作量。
但需要注意的是，因为React.PureComponent实现shouldComponentUpdate方法的方式是浅比较，所以如果在应用中使用了复杂的props和state对象，比如数组和对象，可能会出现误判的情况，导致组件不渲染或者误渲染，因此在使用React.PureComponent时需要格外注意。
三、使用React.PureComponent的注意事项
1、使用React.PureComponent时需要注意props和state的改变方式。因为React.PureComponent只会在props和state的值发生改变时才会进行渲染，所以应当尽可能地避免直接修改props和state，而是使用不可变的方式生成新的props和state。
示例：
class Example extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
data: [
{ id: 1, name: 'Tom' },
{ id: 2, name: 'Jerry' },
{ id: 3, name: 'Spike' }
]
};
}
handleClick = () => {
// 错误示例：直接修改state
this.state.data[0].name = 'Tim';
// 正确示例：使用不可变的方式生成新的state
const newData = [...this.state.data];
newData[0].name = 'Tim';
this.setState({ data: newData });
}
render() {
return (
-
{this.state.data.map(item => (
- {item.name}
))}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/293040.html
微信扫一扫 
支付宝扫一扫 