默认未被memo化的函数组件为何仍需保持纯函数特性？

1. memo的存在是否说明默认下props相同组件仍会重渲染？ #

是的。React默认的渲染逻辑是：只要父组件发生重渲染，不管子组件的props有没有变化，子组件都会跟着重新执行组件函数。memo是一个性能优化工具，它会对组件的新旧props做浅比较，当props相同时跳过组件的重渲染，避免不必要的函数执行开销——但这不是React的默认行为，只是可选的优化手段。

2. 这是否意味着React默认不依赖纯函数特性？ #

不是。React始终假设组件是纯函数（相同的props和state必须返回相同的UI），默认的重渲染逻辑和这个假设并不冲突：

• 即便组件重复执行，只要是纯函数，两次执行的输出结果完全一致，React会跳过实际的DOM更新，只是多了一次函数调用的性能开销而已。
• 纯函数的约束是为了保证组件行为的可预测性，这是React渲染模型的基础，和默认是否重渲染是两个层面的问题。

3. 编写不纯函数组件会引发哪些问题？ #

如果组件依赖不受控的全局变量、在渲染阶段读取/修改外部状态（比如localStorage、可变全局对象），会导致以下实际问题：

• UI不可预测，调试困难：相同props下，组件的输出可能因为外部状态变化而不同。比如父组件重渲染时，明明props没改，但组件UI突然变化，你需要全局排查外部变量的修改，增加调试成本。
• 并发渲染下的异常：React并发模式下可能会中断、重新执行组件函数（比如处理过渡更新、Suspense加载）。如果组件不纯，多次执行的结果可能不一致，导致UI闪烁、状态错乱等难以复现的bug。
• memo失效或逻辑矛盾：如果用memo包裹不纯组件，当外部状态变化但props未变时，memo会跳过重渲染，导致UI停留在旧状态，和实际外部数据不一致。
• 维护成本飙升：不纯组件的依赖是隐式的，其他开发者接手时无法快速理清组件的输入输出关系，后续修改容易引发连锁问题。

示例：不纯组件的问题 #

比如直接在渲染阶段读取localStorage的组件：

function UserProfile() {
  // 不纯：渲染时读取外部可变状态
  const theme = localStorage.getItem('appTheme');
  return <div className={`profile ${theme}`}>我的资料</div>;
}

当用户在其他地方修改了localStorage里的appTheme，这个组件不会自动更新，除非父组件重渲染；如果React在并发渲染中多次执行这个函数，刚好中间localStorage被修改，会得到不同的渲染结果，导致UI异常。

替代方案 #

如果必须依赖外部状态，建议通过React的状态管理机制处理：

• 用useEffect同步外部状态到组件的state中
• 使用Context或状态管理库统一管理可变状态，让组件通过props/context获取状态，保持纯函数特性

内容的提问来源于stack exchange，提问作者Mystical