面试题-React

React有哪些内置hooks

状态管理

• useState
• useReducer

副作用

• useEffect
  • 执行时机: 在浏览器完成绘制（即 DOM 更新并渲染到屏幕）之后异步执行。
  • 适用场景: 适用于大多数副作用操作，如数据获取、订阅、手动 DOM 操作等，因为这些操作通常不需要阻塞浏览器的渲染。
• useLayoutEffect
  • 执行时机: 在 DOM 更新之后，但在浏览器绘制之前同步执行。
  • 适用场景: 适用于需要在浏览器绘制之前同步执行的副作用操作，如测量 DOM 元素、同步更新 DOM 等。由于它是同步执行的，可能会阻塞浏览器的渲染，因此应谨慎使用。

React组件分为哪些类型，怎么实现生命周期函数？

1. 函数组件，使用hooks useEffect实现生命周期函数

useState(() => {console.log('初始化')
})useEffect(() => {console.log('挂载')return () => {console.log('卸载')}
}, [])useEffect(() => {console.log('特定更新')
}, [count])

2. 类组件

• 挂载阶段
  • constructor：初始化状态和绑定方法
  • getDerivedStateFromProps
  • render
  • componentDidMount：执行副作用操作
• 更新阶段
  • getDerivedStateFromProps
  • shouldComponentUpdate
  • render
  • getSnapshotBeforeUpdate
  • componentDidUpdate：响应更新
• 卸载阶段
  • componentWillUnmount：清理资源

说说React Fiber

核心内容是将任务拆成小块，支持中断、恢复和优先级调度，从而提升应用性能和用户体验。

组成

• Fiber节点
• 双缓冲技术
• 任务队列管理