面试题react03

 

1. React事件机制：
   • React的事件机制可以分为两个部分：事件的触发和事件的处理。
   • 事件的触发：在React中，事件可以通过用户与组件进行交互而触发，如点击、鼠标移动、键盘输入等。当用户与组件进行交互时，浏览器会将事件信息传递给React，并由React进行处理。React使用了一种名为“合成事件”的机制来处理事件，这是React对原生浏览器事件的封装，确保了在不同浏览器和平台上的一致性。
2. React的事件和普通的HTML事件有什么不同?
   • React的事件是合成事件，而HTML事件是原生事件。
   • React的合成事件做了兼容性处理，能够性能优化。原生使用addEventListener监听的，而React使用onChange等监听。
   • React必须使用特定的API来更新组件状态，如使用setState方法更新组件状态时，可能需要使用componentDidUpdate作为回调函数。
3. React组件中怎么做事件代理?它的原理是什么?
   • React的事件代理：React并未将事件处理函数与对应的DOM节点直接关联，而是在顶层使用了一个全局事件监听器监听所有的事件。
   • 原理：React会在内部维护一个映射表记录事件与组件事件处理函数的对应关系。当某个事件触发时，React根据这个内部映射表将事件分派给指定的事件处理函数。
4. React高阶组件、Renderprops、hooks有什么区别，为什么要不断选代?
   • 这三者都是React用来解决组件逻辑复用的问题的技术。
   • 高阶组件(HOC)：接收一个组件作为参数，返回一个新的组件。
   • Renderprops：使用值为函数的prop共享代码。
   • Hooks：在不编写class的情况下使用state以及其他的React特性。
   • 迭代原因：为了解决实际开发中遇到的问题，提升开发效率，以及优化用户体验。
5. React如何获取组件对应的DOM元素?
   • 通过ref属性可以在React中获取组件的DOM元素。
   • 创建ref的方式有两种：使用回调函数或使用React.createRef()方法。
6. React中可以在render访问refs吗?为什么?
   • 不可以。因为在render阶段DOM还没有生成，无法获取DOM。DOM的获取需要在pre-commit阶段和commit阶段。
7. 对React的插槽(Portals)的理解，如何使用，有哪些使用场景?
   • React Portals提供了一种将子节点渲染到父组件DOM结构之外的DOM节点的方法。
   • 使用方法：ReactDOM.createPortal(child, container)，其中child是需要被插入到新位置的React节点，container是一个DOM元素。
   • 使用场景：如模态框(Modal)或弹出框(Popup)等需要覆盖页面其他部分的UI元素。
8. 在React中如何避免不必要的render?
   • 使用shouldComponentUpdate生命周期方法，手动控制组件是否应该重新渲染。
   • 使用React.memo或useMemo等API来缓存组件或子组件的渲染结果。
   • 优化数据结构和算法，减少不必要的state更新。
9. 对React-Intl的理解，它的工作原理?
   • React-Intl是一个用于国际化React应用的库。
   • 工作原理：它提供了一套API和组件，用于在React应用中处理多语言文本、日期、数字和格式化等。它使用intl-messageformat库进行消息格式化，支持多种语言和地区设置。
10. 对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根据当前语言显示相应的消息。