React面试深度解析：MVVM、Vue响应式原理与Vue3变化

"React 35 道面试题及答案.docx" React 是一个流行的JavaScript库，用于构建用户界面，尤其是单页应用。面试中，理解React的核心概念和技术细节至关重要。以下是一些与React相关的知识点： 1. **React组件**：React应用由可重用的组件构成，每个组件都有自己的状态和属性，可以通过props接收父组件的数据，并通过state管理内部状态。 2. **JSX**：React推荐使用JSX（JavaScript XML）语法，它允许在JavaScript中编写类似HTML的代码，使声明组件结构更加直观。 3. **生命周期方法**：React组件有不同的生命周期阶段，如挂载阶段（Mounting）、更新阶段（Updating）和卸载阶段（Unmounting）。关键的生命周期方法包括`componentDidMount`（挂载后），`componentDidUpdate`（更新后）和`componentWillUnmount`（卸载前）。 4. **状态提升**：当多个组件需要共享状态时，可以将状态提升至它们的共同祖先组件中，从而减少组件间的耦合。 5. **虚拟DOM**：React使用虚拟DOM来提高性能，通过比较新旧虚拟DOM树，计算最小的DOM更改，然后应用这些更改到实际DOM上，这个过程称为“Reconciliation”。 6. **Props和State的区别**：Props是从父组件传递给子组件的，不可修改；而State是组件内部的数据，可以通过`setState`方法进行更新。 7. **事件处理**：在React中，事件处理器的写法与原生DOM略有不同，例如`onClick`而不是`onclick`，并且事件处理函数接收的是 SyntheticEvent，而不是原生事件。 8. **受控组件与非受控组件**：受控组件的表单元素值通过props控制，每次改变都会触发事件处理函数更新状态；非受控组件则使用`ref`获取表单元素的值。 9. **高阶组件(Higher-Order Components, HOC)**：HOC是一种函数，接收一个组件并返回一个新的组件，常用于复用组件逻辑或注入props。 10. **React Hooks**：自React 16.8版本引入，如`useState`、`useEffect`和`useRef`，使得在函数组件中也能管理状态和副作用，简化了类组件的使用。 Vue.js是另一个流行的前端框架，其响应式系统是核心特性之一。Vue 2.x和3.x在响应式原理上有区别： 1. **Vue 2.x响应式原理**：基于`Object.defineProperty`，当访问或修改数据时，Vue会追踪依赖，利用发布订阅模式通知视图更新。 2. **Vue 3.x响应式原理**：使用`Proxy`替换`Object.defineProperty`，可以监听对象和数组的深层次变化。当数据变化时，会触发相应的拦截器方法，高效地更新视图。 3. **深度观测（Deep Watching）**：Vue 3通过递归调用`reactive`处理对象的深层属性，确保所有子属性也变为响应式的。 4. **数组变化检测**：Vue 2.x通过覆盖数组的原生方法（如`push`, `pop`, `splice`等）来监听数组变化，而在Vue 3.x中，`Proxy`能直接检测数组变化，避免了对数组方法的重写。 5. **`nextTick`**：在Vue中，`nextTick`用于在DOM更新之后执行回调，它支持多种异步执行策略，如Promise、MutationObserver、setImmediate等，确保在正确的时机执行回调。 这些知识点涵盖了React和Vue的基础概念和技术细节，对于面试和实际开发都非常有用。熟悉这些内容将有助于理解和解答面试中可能出现的问题。