React 进阶面试题, 如何解决在 React 的 pureComponent 下引用类型修改值时页面不渲染的问题?

Step 1

Q:: 如何解决在 React 的 PureComponent 下引用类型修改值时页面不渲染的问题？

A:: 在 React 中，PureComponent 通过浅比较来决定是否重新渲染组件。如果传递给组件的 props 是一个引用类型（如对象或数组），即使它内部的值发生了变化，引用地址未变时，PureComponent 也不会触发重新渲染。为了解决这个问题，可以在更新引用类型的数据时，返回一个新的对象或数组，以确保引用地址发生变化。比如可以使用 setState 来更新状态，传入一个新的对象或数组，而不是直接修改原来的引用类型。

Step 2

Q:: 什么是 React 中的 PureComponent？

A:: React 的 PureComponent 是一种优化方式，它通过对比当前和下一个 props 和 state 的浅层对比（shallow comparison），来决定是否需要重新渲染组件。如果 props 和 state 没有变化，PureComponent 将跳过重新渲染。这种方式可以减少不必要的渲染，从而提高性能。

Step 3

Q:: 在什么情况下不建议使用 PureComponent？

A:: PureComponent 适用于 props 和 state 都是简单值（如字符串、数字、布尔值）的情况，而不太适合引用类型的复杂数据结构。如果组件依赖深层次的对象比较，或者 props 频繁变化为新的引用类型，使用 PureComponent 可能导致不正确的渲染或性能问题。