在 React 的 PureComponent 组件中，当引用类型的值被修改时页面不渲染的问题应如何解决？请说明原因及常用解决方案。

回答思路

1. 【回答框架 1】React 的 PureComponent 通过浅比较 props 和 state 来决定是否重新渲染。当引用类型（如对象、数组）内部的属性值被修改，而对象本身引用未变化时，浅比较会认为数据未变化，因此不会触发重新渲染。这是导致页面不更新的根本原因。
2. 【回答框架 2】解决该问题的核心是保持数据不可变性（Immutable）。一种方法是使用扩展运算符或 Object.assign 创建新对象，例如 setState({...obj, id: 2})，以此改变对象引用，使 PureComponent 能检测到变化。
3. 【回答框架 3】对于数组，可使用 concat、map、filter 等返回新数组的方法，避免使用 push、splice 等原位修改方法。例如 setState(arr.concat(newItem)) 而非 arr.push(newItem)。
4. 【回答框架 4】也可考虑使用 Immer 库，它通过 draft 修改数据并自动生成新引用，简化不可变更新流程。或者直接改用普通 Component 并手动判断，但会牺牲性能。
5. 【回答框架 5】在实践过程中，需注意函数组件中 React.memo 同样采用浅比较，也应遵循不可变更新原则。若数据层次较深，可借助 useMemo 或 useCallback 优化性能，但核心仍是控制引用不变。
6. 【关键点 1】PureComponent 使用浅比较，只比较引用是否变化。
7. 【关键点 2】修改引用类型时必须创建新引用。
8. 【关键点 3】避免原位修改数组的方法如 push 和 splice。
9. 【关键点 4】优先采用扩展运算符或 concat 等不可变更新方式。
10. 【关键点 5】考虑引入 Immer 或 Redux Toolkit 等工具简化更新。
11. 【易错点 1】切莫直接修改引用类型内部属性，否则 PureComponent 无法感知。
12. 【易错点 2】使用 push 等方法修改数组后未重新赋值，会导致渲染失败。
13. 【易错点 3】浅比较无法检测深层对象属性变化，需注意多层嵌套更新时也要保证每一层引用都变化。