react原理面试题

### 关于 React 原理的面试问题及解答 #### 什么是虚拟 DOM？ 虚拟 DOM 是一种轻量级 JavaScript 对象，它是真实 DOM 的副本。每当状态改变时，React 更新虚拟 DOM 而不是直接更新浏览器中的实际 DOM。之后，React 将比较新旧两个版本的虚拟 DOM 并计算差异，仅将必要的更改应用于真实的 DOM[^1]。 #### React 组件如何进行优化以提高性能？ 为了提升性能，可以通过如下几种方式进行组件优化： - 使用 `React.memo` 或者纯组件来防止不必要的重渲染； - 利用 `useCallback` 和 `useMemo` 来缓存函数和复杂表达式的值； - 合理利用 shouldComponentUpdate 生命周期钩子或者其 hooks 版本 useLayoutEffect 减少不必要更新操作。 这些措施有助于减少重复工作并加快应用程序响应速度[^3]。 #### 解释一下受控组件与非受控组件之间的区别是什么？ 在表单元素中， - 受控组件是指那些由 React 控制输入数据流动情况下的 HTML 表单项；此时 value 属性绑定到 state 上并通过 onChange 事件处理器同步用户交互产生的变化。 - 非受控组件则是指让原生浏览器处理 input 数据流的方式，在这种情况下通常会借助 ref API 获取当前节点实例及其内部属性值[^2]。 ```javascript // 受控组件例子 class ControlledInput extends React.Component { constructor(props){ super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value:event.target.value}); } render(){ return ( <input type="text" value={this.state.value} onChange={this.handleChange}/> ); } } ``` ```html <!-- 非受控组件 --> <input defaultValue="foo" ref={(ref) => this.inputRef = ref}/> <button onClick={()=>{ console.log(this.inputRef.value); // 手动获取最新值 }}>Log Value</button> ```