React是什么React 是一个用于构建用户界面的 JavaScript 库主要负责视图层开发。它采用组件化思想将 UI 拆分为独立组件提高代码复用性和可维护性。React 使用声明式编程方式只需要描述界面状态而不需要手动操作 DOM。同时通过虚拟 DOM 和 Diff 算法减少真实 DOM 操作来提升性能并通过单向数据流使数据变化更加可预测因此非常适合构建大型单页应用。特性组件化开发React 将页面拆分为独立组件可复用可组合易维护声明式编程React 只需要描述UI 应该长什么样而不是一步步操作 DOM虚拟 DOM减少 DOM 操作提升渲染性能单向数据流数据可控状态更容易追踪应用更稳定JSX 语法JavaScript XML 的语法扩展说说 Real DOM 和 Virtual DOM 的区别优缺点Real DOM 和 Virtual DOM 的区别主要体现在表示形式和更新方式上。Real DOM 是浏览器真实的 DOM 结构每个节点都是真实对象直接操作 Real DOM 会引起页面的重排和重绘性能开销较大。Virtual DOM 是用 JavaScript 对象对真实 DOM 的一种描述。在 React 中JSX 会被编译成 Virtual DOM 对象当状态发生变化时React 会先在虚拟 DOM 中进行 Diff 算法比较找出变化的部分再一次性更新真实 DOM从而减少不必要的 DOM 操作。优缺点方面Real DOM 的优点是简单直接但频繁操作会导致性能较差。Virtual DOM 的优点是减少真实 DOM 操作提高性能同时支持跨平台渲染缺点是多了一层计算在极简单或首次渲染场景下可能略慢。说说 React 生命周期有哪些不同阶段每个阶段对应的方法是挂载阶段组件创建并插入 DOM执行顺序constructor组件初始化时执行用于初始化 state、绑定事件接收 propsstatic getDerivedStateFromProps静态方法在 render 前执行根据 props 更新 state必须返回新 state 或 null很少使用。render 核心返回 JSX生成 Virtual DOM纯函数不能 setStatecomponentDidMount 高频组件挂载完成后执行DOM 已经生成常用于请求数据操作 DOM添加事件监听挂载阶段顺序constructor-getDerivedStateFromProps-render-componentDidMount更新阶段state 或 props 改变执行顺序getDerivedStateFromProps更新前调用shouldComponentUpdate 性能优化点决定是否重新渲染,返回 true / falserender重新生成 Virtual DOMgetSnapshotBeforeUpdateDOM 更新前执行,获取更新前 DOM 信息如滚动位置componentDidUpdate ⭐更新完成后执行,可操作 DOM 或发请求更新阶段顺序getDerivedStateFromProps - shouldComponentUpdate - render - getSnapshotBeforeUpdate - componentDidUpdate卸载阶段组件销毁componentWillUnmount组件移除前执行用于清除定时器,移除事件监听,取消请求,取消订阅state 和 props 有什么区别state 和 props 都是 React 中用于保存数据并驱动视图更新的对象但它们的来源和职责不同。props 是父组件传入的数据组件只读state 是组件内部维护的数据可以修改。详细区别propsstate数据来源不同由父组件传递属于外部数据组件内部自己管理通常在 constructor 或 Hooks 中定义是否可修改子组件不能修改 props只能由父组件重新传值必须通过 setState 修改作用不同组件通信父 → 子管理组件自身状态React 是单向数据流props 用于数据传递state 用于状态管理两者共同决定组件的 UI。super() 和 super(props) 有什么区别super() 和 super(props) 都是调用父类构造函数因为 React 类组件继承自 React.Component必须先调用 super 才能使用 this。区别是super(props) 会把 props 传给父类这样在 constructor 里可以直接通过 this.props 访问如果只写 super()那么 constructor 中的 this.props 是 undefined。所以 React 官方推荐始终使用 super(props)。因为 ES6 规定子类的 this 是由父类初始化的所以必须先执行 super 才能使用 this。constructor 是 React 类组件的初始化函数在组件实例创建时执行一次主要用于初始化 state 和绑定方法。它执行在首次 render 之前。如果需要在 constructor 中访问 props必须使用 super(props)否则 this.props 会是 undefined。说说 React中的setState执行机制setState 是 React 更新状态的核心方法它不会立即修改 state而是将更新加入队列进行批量合并然后统一触发 render从而提高性能。在 React 合成事件和生命周期中 setState 表现为异步而在 setTimeout 或原生事件中表现为同步。当多次调用 setState 时会发生批量更新React 会合并对象更新后面的会覆盖前面的。因此当新状态依赖旧状态时应使用函数形式的 setState。onClick () { this.setState((prevState, props) { return {count: prevState.count 1}; }); this.setState((prevState, props) { return {count: prevState.count 1}; }); }说说React的事件机制React 并没有直接使用浏览器原生事件而是实现了一套自己的事件系统叫合成事件SyntheticEvent通过事件委托统一管理所有事件从而提升性能和兼容性。合成事件是 React 对原生 DOM 事件的一个封装它统一了不同浏览器的事件行为并提供和原生事件一致的 API。例如onClick不是直接绑定到按钮 DOM,而是 React 自己管理的事件核心机制事件委托最重要,React 会把所有事件统一绑定到顶层容器早期是 documentReact17 后是 root 节点而不是绑定到每个 DOM 上。事件触发流程用户点击 - 原生 DOM 冒泡 - 到达 root/document - React 捕获事件 - 生成 SyntheticEvent - 按组件树冒泡执行回调。所以 React 是自己模拟了一套冒泡机制,为了实现跨浏览器兼容、事件统一管理以及配合 React 的批量更新机制。执行顺序就是原生事件先执行React 合成事件后执行。React 事件机制基于合成事件实现它对原生事件进行了封装并采用事件委托的方式将所有事件统一绑定到根节点再由 React 进行事件分发和冒泡模拟。这种设计减少了事件监听数量提高性能同时实现了跨浏览器兼容并能更好地配合 React 的更新机制。React事件绑定的方式有哪些区别react 中事件绑定主要有 4 种方式它们的区别主要在this 指向和性能上。render 里 bind每次 render 都会重新生成函数性能较差不推荐。render 里箭头函数利用箭头函数绑定 this但每次 render 也会创建新函数可能导致子组件重复渲染。constructor 中 bind只绑定一次避免重复创建函数性能更好。类字段箭头函数类字段箭头函数利用箭头函数的词法作用域自动绑定 this只创建一次函数是目前最推荐方式。早期 React 主要使用类组件所以需要处理 this 绑定问题比如 bind 或箭头函数。但在 React Hooks 出现之后函数组件成为主流因为没有 this所以也不存在事件绑定的 this 问题现在项目基本都使用函数组件。React中组件之间如何通信React 组件通信主要有几种方式第一父子组件通过 props 传递数据第二子组件通过调用父组件传入的回调函数向父组件通信第三兄弟组件通过状态提升由共同父组件进行数据中转第四跨层级组件可以使用 Context 避免 props drilling第五对于非关系组件一般使用 Redux 等全局状态管理方案。React 整体遵循单向数据流思想。props drilling 指的是组件层级很深时数据需要通过一层层 props 传递给下层组件即使中间组件并不使用这些数据也必须传递导致代码冗余和维护困难。React中的key有什么作用key 是 React 在列表渲染时用于标识元素唯一性的属性在 Diff 算法中用于判断节点是新增、删除还是复用从而减少 DOM 操作提高性能。如果没有 keyReact 会按位置比较元素可能导致不必要更新甚至状态错乱。因此 key 应该保持稳定唯一一般使用数据 id不推荐使用 index因为当列表发生插入、删除或排序时index 会变化导致 React 误认为元素改变从而产生错误复用可能引发状态错乱和额外渲染。说说对React refs 的理解应用场景refs 是 React 提供的一种方式用来直接访问 DOM 节点或组件实例从而进行一些无法通过 state 和 props 完成的操作。React 推荐通过 state 和 props 驱动视图但有些场景需要直接操作 DOM比如获取焦点、播放视频或获取元素尺寸这时候就需要 refs。现在 React 主要就两种useRefuseRef 会返回一个对象真实 DOM 存在 current 属性中。createRef类组件应用场景对Dom元素的焦点控制、内容选择、控制对Dom元素的内容设置及媒体播放对Dom元素的操作和对组件实例的操作集成第三方 DOM 库useRef 和 state 有什么区别useRef 修改 current 不会触发组件重新渲染而 state 更新会触发重新渲染。为什么 useRef 不会触发 render因为 React 不会追踪 ref.current 的变化它只是一个普通对象。说说对React中类组件和函数组件的理解有什么区别React 组件主要分为类组件和函数组件早期类组件功能更完整但现在随着 Hooks 出现函数组件已经成为主流开发方式。类组件是基于 ES6 class 编写的组件需要继承 React.Component通过 render() 返回 UI。特点使用 this.props、this.state使用 setState 更新状态有完整生命周期componentDidMount 等存在 this 指向问题函数组件本质就是一个返回 JSX 的函数现在配合 Hooks 也可以管理状态和副作用。特点没有 this,更简单,使用 Hooks 管理逻辑类组件函数组件写法不同class render函数组件状态管理方式不同this.state函数组件通过useState Hook也可以管理状态。生命周期不同useEffect 替代生命周期this 机制不同有 this,需要 bind,容易产生 this 指向问题没有 this逻辑更清晰。