DEV Community
·
10个让我困惑的React.js面试问题（附答案）
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
文章探讨了React.js面试中的关键问题，如useEffect与useLayoutEffect的区别、key属性的重要性、React调和过程、闭包的影响，以及受控与非受控组件的区别，旨在提升面试准备。
🎯
关键要点
- useEffect与useLayoutEffect的区别在于执行时机，useEffect在DOM绘制后执行，而useLayoutEffect在绘制前执行。
- key属性在列表中很重要，帮助React识别哪些项目发生了变化、被添加或移除。
- React调和过程是通过比较新旧虚拟DOM，尽量最小化实际DOM的更新。
- 闭包会记住变量状态，过时的闭包可能导致React hooks中的陈旧状态错误。
- 受控组件由React管理输入状态，而非受控组件由DOM通过ref处理。
- 使用React Testing Library测试组件时，可以使用render和expect方法。
- 代码分割通过React.lazy()和Suspense实现，仅在需要时加载组件，从而提高性能。
- 在useEffect中更新状态可能导致重新渲染，需谨慎处理依赖关系以避免无限循环。
- useState常见错误包括初始值设置不正确、忘记其异步特性、以及在更新状态时未使用回调形式。
- 尽管有Context API，Redux仍被使用，因为它提供可预测的状态、中间件支持和更好的开发工具。
❓
延伸问答
useEffect和useLayoutEffect有什么区别？
useEffect在DOM绘制后执行，而useLayoutEffect在绘制前执行，可以阻止渲染。
为什么在列表中使用key属性很重要？
key属性帮助React识别哪些项目发生了变化、被添加或移除，避免不必要的重新渲染。
什么是React调和过程？
React调和过程是通过比较新旧虚拟DOM，尽量最小化实际DOM的更新。
闭包在React hooks中可能导致什么问题？
闭包会记住变量状态，过时的闭包可能导致陈旧状态错误，尤其在setInterval或事件处理器中。
受控组件和非受控组件有什么区别？
受控组件由React管理输入状态，而非受控组件由DOM通过ref处理。
如何使用React Testing Library测试组件？
可以使用render方法渲染组件，并使用expect方法进行断言，例如expect(screen.getByText(/hello/i)).toBeInTheDocument()。
➡️
