- 正确答案：在 React 中，无状态组件（Stateless Component）和纯函数组件（Pure Function Component）这两个术语在实践中经常被混用，但严格来说，它们的含义存在历史演进与语义差异。无状态组件是 React 16.0 之前对不使用 state 和生命周期方法的函数组件的通俗叫法；而纯函数组件特指满足“纯函数”语义的函数组件——即给定相同 props 和上下文（如 context），始终返回相同的 JSX，且不产生副作用（如修改外部变量、发起网络请求、调用 setState、useEffect 等）。自 React 16.8 引入 Hooks 后，“无状态”已不再准确——函数组件可通过 useState、useReducer 等 Hook 持有状态，因此“无状态组件”这一术语已过时；现代 React 中更准确的分类是：普通函数组件（可能含状态/副作用） vs 纯函数组件（人为约束为纯函数，常配合 React.memo 实现浅层 props 比较优化）。 - 解答思路：首先厘清术语的时间线——React 15.x 时代只有 class 组件和无状态函数组件（SFC, Stateless Functional Component），后者因无 this、无 state、无生命周期，天然接近纯函数；但即便如此，早期 SFC 仍可调用 Date.now()、Math.random() 或闭包捕获的外部变量，破坏纯性。React 16.8+ 后，函数组件获得状态能力，彻底打破“无状态”字面意义；此时是否“纯”，不再由组件类型决定，而取决于其内部实现是否符合纯函数定义。因此区分关键在于：是否主动规避副作用 + 是否保证输入输出确定性 + 是否配合 memoization（如 React.memo）实现渲染优化。 - 深度知识讲解：底层机制上，React 的 reconciler（协调器）对函数组件的调用本质就是执行一个 JavaScript 函数，返回 React Element 树。该函数是否纯，完全由开发者控制。纯函数组件的核心约束有三：（1）确定性：props（及 context）相同时，返回的 JSX 结构（即 React Element 对象树）必须结构等价（注意：不是引用相等，而是内容一致；React Diff 算法基于 key 和 type 比较，不要求对象引用相同）；（2）无副作用：不能在组件函数体顶层执行数据获取、订阅、DOM 操作、setState、useEffect 等触发副作用的操作（这些必须封装在 useEffect/useLayoutEffect 或事件处理器中）；（3）无内部可变状态：不依赖或修改闭包外的可变变量（如模块级 let 变量、全局 window 属性），否则会导致多次渲染结果不一致。 React.memo 是实现纯函数组件性能优化的关键配套工具。它对函数组件进行浅层 props 比较（shallow equal），仅当 props 引用未变时跳过重新渲染。但注意：React.memo 本身不保证组件是纯的——它只是优化手段；若组件内部有 Math.random() 或 new Date()，即使 props 相同，每次渲染结果也不同，React.memo 无法阻止不必要渲染，且违背纯函数语义。真正的纯性需代码自律 + 工具辅助（如 ESLint 插件 eslint-plugin-react-hooks 的 exhaustive-deps 规则可部分检测闭包依赖遗漏）。进一步延伸：PureComponent 是 class 组件时代的对标方案，其 shouldComponentUpdate 默认做 props 和 state 的浅比较；而函数组件时代，React.memo 就是 PureComponent 的函数式等价物。但二者均只解决“是否需要 re-render”的问题，不解决“组件逻辑是否纯”的问题。 - 伪代码与对比示例： // ❌ 名义上“无状态”，实则非纯：使用随机数，每次渲染结果不同 function BadGreeting(props) { return

Hello {props.name}! Time: {Math.random()}

; // 非纯：输出不确定 } // ✅ 纯函数组件：无副作用、确定性输出 function PureGreeting(props) { return

Hello {props.name}!

; // 输入 name 相同 → 输出 JSX 结构相同 } const MemoizedPureGreeting = React.memo(PureGreeting); // 加 React.memo 实现 props 浅比较优化 // ⚠️ 表面纯，实际隐含副作用（闭包捕获了可变外部变量） let counter = 0; function ImpureByClosure(props) { counter++; // 副作用！违反纯函数定义 return

Count: {counter}

; } // ✅ 使用 useState 封装状态，仍可保持组件逻辑“纯”（指渲染函数自身无副作用，状态变更交由 React 管理） function Counter({ initial = 0 }) { const [count, setCount] = useState(initial); // 渲染函数体只做 JSX 构造，无副作用 return (

Count: {count}

); } // 注意：Counter 不是纯函数组件（因 useState 引入状态），但其 render body 是纯的；整体组件行为由 React 的状态管理机制保障一致性。 // 🔍 底层原理补充：React.createElement 返回的是不可变的 plain object（如 {type: 'div', props: {...}, key: null}），其属性均为 JSON-safe 值（不含函数或 Symbol，除非显式传入）。这使得对 Element 对象做 shallowEqual 成为可能（React.memo 内部即调用 Object.is 对 props 进行逐字段比较），也为服务端渲染（SSR）和并发渲染（Concurrent Rendering）中的可中断、可重试的 reconciler 提供基础——因为纯函数组件的调用可安全重入。

react面试题

全站热榜

创作者周榜