前端八股文-react篇

React 基础概念

1. React 的生命周期方法有哪些？

React 类组件的生命周期分为三个阶段：

挂载阶段：

• constructor()：初始化 state 和绑定方法
• static getDerivedStateFromProps()：在 render 前调用
• render()：渲染组件
• componentDidMount()：组件挂载后调用，适合发起网络请求

更新阶段：

• static getDerivedStateFromProps()：props 变化时调用
• shouldComponentUpdate()：决定组件是否重新渲染
• render()：渲染组件
• getSnapshotBeforeUpdate()：在 DOM 更新前捕获信息
• componentDidUpdate()：组件更新后调用

卸载阶段：

• componentWillUnmount()：组件卸载前清理定时器、取消订阅等

2. React 的函数组件和类组件有什么区别？

特性	函数组件	类组件
语法	普通函数	ES6 class 继承 React.Component
状态管理	使用 Hooks (useState)	使用 this.state
生命周期	使用 useEffect 等 Hooks	有完整的生命周期方法
this 关键字	无	需要绑定 this
性能	更轻量	相对较重
代码量	更简洁	相对冗长

3. 什么是虚拟 DOM？React 如何工作？

虚拟 DOM：

• 是真实 DOM 的轻量级 JavaScript 表示
• 用 JavaScript 对象描述 DOM 树结构
• 通过 diff 算法比较新旧虚拟 DOM 的差异

工作流程：

1. 当状态改变时，重新渲染组件生成新的虚拟 DOM
2. 比较新旧虚拟 DOM（diff 算法）
3. 计算出最小变更集
4. 批量更新真实 DOM

4. React 的 key 有什么作用？

• 唯一标识：帮助 React 识别哪些元素被改变、添加或删除
• 优化性能：减少不必要的 DOM 操作
• 正确使用：
  • 应该在数组内的元素上设置 key
  • key 应该在兄弟节点间唯一
  • 不推荐使用 index 作为 key（除非列表静态不变）

React Hooks

5. 常用的 React Hooks 有哪些？

1. useState：管理组件状态

   const [state, setState] = useState(initialState);
   

2. useEffect：处理副作用

   useEffect(() => {
        
        
     // 副作用代码
     return () => {
        
         /* 清理函数 */ };
   }, [dependencies]);
   

3. useContext：访问 Context

   const value = useContext(MyContext);
   

4. useReducer：复杂状态逻辑

   const [state, dispatch] = useReducer(reducer, initialState);
   

5. useCallback：记忆函数