- React事件机制 :
- React的事件机制可以分为两个部分:事件的触发和事件的处理。
- 事件的触发:在React中,事件可以通过用户与组件进行交互而触发,如点击、鼠标移动、键盘输入等。当用户与组件进行交互时,浏览器会将事件信息传递给React,并由React进行处理。React使用了一种名为"合成事件"的机制来处理事件,这是React对原生浏览器事件的封装,确保了在不同浏览器和平台上的一致性。
- React的事件和普通的HTML事件有什么不同?
- React的事件是合成事件,而HTML事件是原生事件。
- React的合成事件做了兼容性处理,能够性能优化。原生使用
addEventListener
监听的,而React使用onChange
等监听。- React必须使用特定的API来更新组件状态,如使用
setState
方法更新组件状态时,可能需要使用componentDidUpdate
作为回调函数。- React组件中怎么做事件代理?它的原理是什么?
- React的事件代理:React并未将事件处理函数与对应的DOM节点直接关联,而是在顶层使用了一个全局事件监听器监听所有的事件。
- 原理:React会在内部维护一个映射表记录事件与组件事件处理函数的对应关系。当某个事件触发时,React根据这个内部映射表将事件分派给指定的事件处理函数。
- React高阶组件、Renderprops、hooks有什么区别,为什么要不断选代?
- 这三者都是React用来解决组件逻辑复用的问题的技术。
- 高阶组件(HOC):接收一个组件作为参数,返回一个新的组件。
- Renderprops:使用值为函数的prop共享代码。
- Hooks:在不编写class的情况下使用state以及其他的React特性。
- 迭代原因:为了解决实际开发中遇到的问题,提升开发效率,以及优化用户体验。
- React如何获取组件对应的DOM元素?
- 通过
ref
属性可以在React中获取组件的DOM元素。- 创建
ref
的方式有两种:使用回调函数或使用React.createRef()
方法。- React中可以在render访问refs吗?为什么?
- 不可以。因为在render阶段DOM还没有生成,无法获取DOM。DOM的获取需要在pre-commit阶段和commit阶段。
- 对React的插槽(Portals)的理解,如何使用,有哪些使用场景?
- React Portals提供了一种将子节点渲染到父组件DOM结构之外的DOM节点的方法。
- 使用方法:
ReactDOM.createPortal(child, container)
,其中child
是需要被插入到新位置的React节点,container
是一个DOM元素。- 使用场景:如模态框(Modal)或弹出框(Popup)等需要覆盖页面其他部分的UI元素。
- 在React中如何避免不必要的render?
- 使用
shouldComponentUpdate
生命周期方法,手动控制组件是否应该重新渲染。- 使用
React.memo
或useMemo
等API来缓存组件或子组件的渲染结果。- 优化数据结构和算法,减少不必要的state更新。
- 对React-Intl的理解,它的工作原理?
- React-Intl是一个用于国际化React应用的库。
- 工作原理:它提供了一套API和组件,用于在React应用中处理多语言文本、日期、数字和格式化等。它使用intl-messageformat库进行消息格式化,支持多种语言和地区设置。
- 对React context的理解
- React Context提供了一种在组件之间共享值的方式,而不必显式地通过每一层的props来逐层传递。
- 使用React Context可以避免在多层嵌套的组件中传递props,使代码更加简洁和易于维护。
- React Context由
React.createContext()
创建,并通过<Context.Provider>
和<Context.Consumer>
来提供和接收值。在React 16.8之后,可以使用useContext
Hook来更方便地使用Context。11. 为什么React并不推荐优先考虑使用Context?
React的Context提供了一种在组件之间共享值而无需显式地通过每一层组件传递props的方式。然而,它并不总是最佳实践,因为:
- 性能:当Context的提供者(Provider)的值改变时,所有依赖这个Context的消费者(Consumer)都会重新渲染,这可能导致不必要的渲染。
- 复杂性:过度使用Context可能导致代码难以理解和维护。
- 替代方案:对于简单的数据共享,React的props和state通常更直观和易于管理。
12. React中什么是受控组件和非控组件?
- 受控组件 :其值由React state控制,并且只能通过更新state来改变。例如,
<input type="text" value={this.state.value} onChange={this.handleChange} />
。- 非受控组件 :其值由DOM本身控制,React不会直接管理。例如,
<input type="file" />
或<input type="checkbox" defaultChecked />
。13. React中refs的作用是什么?有哪些应用场景?
Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素。其主要用途包括:
- 访问DOM节点或React元素。
- 对DOM元素执行特定的操作,如焦点管理、文本选择或媒体播放。
- 触发强制的DOM更新。
- 集成第三方DOM库。
14. React组件的构造函数有什么作用?它是必须的吗?
构造函数用于初始化类的实例。在React组件中,它通常用于:
- 绑定事件处理函数到类的实例。
- 初始化state。
然而,对于函数组件,构造函数是不必要的,因为它们没有实例。对于类组件,如果不需要初始化state或绑定事件处理函数,则也可以不使用构造函数。
15. React.forwardRef是什么?它有什么作用?
React.forwardRef
是一个高阶组件,它允许你将ref转发到子组件。这在你需要直接访问子组件的DOM节点或类组件实例时非常有用,尤其是当你使用高阶组件或函数组件时。16. 类组件与函数组件有什么异同?
- 相同点:它们都是React组件,可以接受props并返回React元素。
- 不同点 :
- 类组件基于ES6的类,具有生命周期方法、state等。
- 函数组件是一个简单的JavaScript函数,它接受props并返回JSX。
- 函数组件更简洁,更易于测试,并且可以使用Hooks(如
useState
和useEffect
)来管理状态和副作用。17. React中可以在render访问refs吗?为什么?
不可以 。在render方法中访问refs是不安全的,因为此时DOM可能还没有更新。你应该在生命周期方法(如
componentDidMount
或componentDidUpdate
)或Hooks(如useEffect
)中访问refs。18. 对React的插槽(Portals)的理解,有哪些使用场景
React的Portals提供了一种将子组件渲染到父组件DOM层次结构之外的DOM节点的方法。它们对于以下场景特别有用:
- 当父组件和子组件的样式或布局需要彼此独立时。
- 当子组件需要被渲染到DOM的特定部分(如模态框、弹出窗口或工具提示)时。
19. 在React中如何避免不必要的render?
- 使用
React.memo
或useMemo
来避免不必要的组件或值的重新计算。- 使用
shouldComponentUpdate
或React.PureComponent
来防止不必要的类组件重新渲染。- 使用
useCallback
来避免不必要的函数重新创建。- 确保props和state的变化是必需的,并避免在它们不必要时触发更新。
20. 对React-intl的理解,它的工作原理?
React-intl是一个用于国际化React应用的库。它允许你以不同的语言显示内容,并提供格式化数字、日期、货币等功能。其工作原理通常涉及:
- 定义用于不同语言的消息和翻译。
- 在组件中使用这些消息,并指定要使用的语言。
- 在运行时,React-intl根据当前语言显示相应的消息。
面试题react03
赵不困888(合作私信)2024-06-09 22:18
相关推荐
明月看潮生几秒前
青少年编程与数学 02-004 Go语言Web编程 20课题、单元测试Yan.love7 分钟前
开发场景中Java 集合的最佳选择椰椰椰耶10 分钟前
【文档搜索引擎】搜索模块的完整实现大G哥10 分钟前
java提高正则处理效率VBA633720 分钟前
VBA技术资料MF243:利用第三方软件复制PDF数据到EXCEL轩辰~22 分钟前
网络协议入门小_太_阳31 分钟前
Scala_【1】概述向宇it32 分钟前
【从零开始入门unity游戏开发之——unity篇02】unity6基础入门——软件下载安装、Unity Hub配置、安装unity编辑器、许可证管理智慧老师41 分钟前
Spring基础分析13-Spring Security框架lxyzcm42 分钟前
C++23新特性解析:[[assume]]属性