React JS 面试必备问答

React JS 面试必备问答（2024版）以下整理了React面试中高频的核心概念、组件机制、性能优化及高级模式相关问题，涵盖基础到进阶内容：

• React是什么？用于构建用户界面的JavaScript库，核心特点是通过组件化实现UI的模块化开发，支持状态管理、虚拟DOM高效更新。

• JSX的作用JavaScript的语法扩展，允许在JS中编写类HTML结构，提升代码可读性，最终会被Babel编译为React.createElement()调用。

• 虚拟DOM（Virtual DOM）轻量级DOM抽象层，通过状态变化生成新虚拟树，与旧树diff后批量更新真实DOM，减少重绘成本。

• 组件类型及区别

  类组件：继承React.Component，支持生命周期方法与内部状态管理。

  函数组件：简洁无状态，通过Hooks（如useState、useEffect）实现状态与副作用管理。

• Props vs State

  Props：父组件传递的只读数据，子组件不可直接修改。

  State：组件内部管理的可变数据，状态更新触发重新渲染。

• 状态提升（Lifting State Up）多个组件共享状态时，将状态提升至最近共同父组件，通过props分发，确保数据一致性。

• 类组件生命周期方法

  挂载阶段：constructor → getDerivedStateFromProps → render → componentDidMount（常用于API调用）。

  更新阶段：getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate。

  卸载阶段：componentWillUnmount（清理定时器、事件监听）。

• 常用Hooks

  useState：管理函数组件状态，返回当前状态与更新函数。

  useEffect：处理副作用（如数据获取、订阅），依赖数组控制执行时机。

  useContext：跨组件层级共享数据，避免prop drilling。

  useReducer：复杂状态逻辑时替代useState，类似Redux的reducer模式。

• 避免不必要的渲染

  React.memo：缓存函数组件，props未变化时跳过渲染。

  useCallback/useMemo：缓存函数或计算值，减少子组件重复渲染。

• 代码分割与懒加载使用React.lazy + Suspense动态加载组件，减少初始包体积。

• 虚拟DOM优化避免在render中创建新对象/函数，使用key属性稳定列表项标识。

• 高阶组件（HOC）函数接收组件并返回新组件，用于逻辑复用（如权限控制、日志记录）。

• Context API全局状态管理，替代Redux的轻量级方案，通过Provider/Consumer或useContext访问。

• Redux核心概念

  单一数据源：全局状态存储在Store中。

  纯函数Reducer：根据action更新状态，无副作用。

  中间件：处理异步逻辑（如Redux Thunk、Saga）。

• React Router客户端路由库，通过动态路由实现单页应用（SPA）的URL与UI同步，支持嵌套路由、懒加载。

• 受控组件 vs 非受控组件

  受控：表单数据由React状态管理（如value={state}），需onChange更新状态。

  非受控：数据由DOM自身管理（如defaultValue），通过ref获取值。

• 合成事件（SyntheticEvent）React封装跨浏览器事件对象，统一事件处理逻辑，防止内存泄漏（需手动调用persist()保留事件）。

• XSS防护使用dangerouslySetInnerHTML时需转义用户输入，避免直接渲染未过滤内容。

• TypeScript集成通过接口定义props/state类型，增强代码健壮性，减少运行时错误。

• 服务器端渲染（SSR）使用Next.js等框架实现首屏快速加载与SEO优化，需处理数据预取与客户端激活（hydration）。

• Q：如何实现一个受控输入框？

  function ControlledInput() { const [value, setValue] = useState(''); return <input value={value} onChange={(e) => setValue(e.target.value)} />;}

• Q：useEffect依赖项为空数组时何时执行？仅在组件挂载时执行一次，类似class组件的componentDidMount。

• Q：Redux中如何发起异步请求？使用中间件（如Redux Thunk）派发函数而非普通action，在函数内调用API并dispatch同步action更新状态。

以上内容覆盖React面试核心知识点，建议结合实际项目经验深入理解原理与最佳实践。