PureComponent 是 React 中的一个类组件，继承自 React.Component，它提供了一个优化性能的机制。PureComponent 会自动实现 shouldComponentUpdate 方法，只有当组件的 props 或 state 发生变化时，组件才会重新渲染。
1. 工作原理
PureComponent 在比较 props 和 state 时，会执行浅层比较（shallow comparison），即比较 props 和 state 的每个属性值是否发生变化。如果某个属性值发生了变化，组件将会重新渲染。如果没有变化，组件将跳过渲染，避免不必要的重新渲染，从而提升性能。
2. 使用场景
PureComponent 适用于那些 props 和 state 都是简单数据类型（如字符串、数字、布尔值等）或是不可变对象（如通过 Object.freeze 或 Immutable.js 管理的对象）的场景。
如果你的组件的 props 或 state 是复杂的对象或数组，且这些数据是可变的，PureComponent 的浅层比较可能不够准确。此时，你可能需要使用 shouldComponentUpdate 来手动优化性能。
3. 代码示例
import React, { PureComponent } from 'react';class MyComponent extends PureComponent {render() {console.log('Rendering...');return <div>{this.props.text}</div>;}
}export default MyComponent;
在这个示例中，MyComponent 继承自 PureComponent。如果 props.text 没有变化，React 将跳过渲染，从而提升性能。
4. 浅层比较
PureComponent 使用的是 浅层比较，也就是说，只有当 props 或 state 的引用发生变化时，组件才会重新渲染。如果 props 或 state 是对象或数组，只要其引用没有改变，即使内部数据发生了变化，PureComponent 也不会重新渲染。
例如：
import React, { PureComponent } from 'react';class MyComponent extends PureComponent {render() {console.log('Rendering...');return <div>{this.props.data.name}</div>;}
}export default MyComponent;
如果你传递给 MyComponent 的 data 对象引用没有变化，组件就不会重新渲染：
// 父组件
class ParentComponent extends React.Component {state = {data: { name: 'John' }};updateData = () => {// 这里只是修改了对象内部的值，但 `data` 的引用没有变化this.setState(prevState => {prevState.data.name = 'Jane';return { data: prevState.data };});};render() {return (<div><button onClick={this.updateData}>Change Name</button><MyComponent data={this.state.data} /></div>);}
}
在上述代码中，MyComponent 即使 data.name 改变了，也不会重新渲染，因为 data 对象的引用没有变化。
5. 何时不使用 PureComponent
-
复杂对象或数组：如果
props或state是复杂对象或数组，并且可能会改变其中的内容但保持引用不变，PureComponent的浅层比较会导致错误。此时，应该使用深层比较或手动实现shouldComponentUpdate。 -
不可控组件：如果你的组件有不可控的行为（例如通过
refs直接访问 DOM 或通过其他方式修改状态），则PureComponent可能不适用。
6. 性能考虑
虽然 PureComponent 可以提升性能，但并非总是适合每个场景。对于大量小的更新，使用 PureComponent 的性能优化效果会比较明显。但是对于大的复杂应用，它可能会带来额外的性能开销，因为每次更新都需要进行浅层比较。
总的来说，PureComponent 适用于避免不必要的重新渲染，但也需要根据具体情况评估是否使用。
