React面试（二）

文章目录

一、类组件和函数组建的异同
二、refs
三、react事件和普通的html事件有什么不同
[四、React 组件中怎么做事件代理？它的原理是什么？](#四、React 组件中怎么做事件代理？它的原理是什么？)
五、React组件的构造函数有什么作用？它是必须的吗？
六、在React中如何避免不必要的render

一、类组件和函数组建的异同

类组件：

类组件中必须有render()方法，用于返回react元素

state和prop需要通过this访问

类组件具有react的生命周期（比如componentDidmount 、componentDidUpdate）

函数组件

函数组件中没有state

函数组件通过JS函数或者箭头函数声明

直接返回react元素

引入hooks之后具有和类组件的状态和生命周期等

二、refs

refs通过i工了一种方式，允许我们直接操作DOM

用途：

获取鼠标焦点：比如在提交的时候，对组件格式进行校验，如果有不对的地方，鼠标自动获取到该组件上

触发动画：在需要通过直接操作DOM元素去触发动画时，可以使用ref这季节修改元素的样式

继承第三方库：比如需要直接对DOM元素操作第三方库，比如需要通过D3.js生成图表，ref可以提供直接的DOM访问能力

声明：在类组件中通常使用React.createRef创建ref，并赋值给相应的变量，在函数组件中通常使用useSate()进行声明。

访问：在类组件中使用this.myRef.current来访问指向的节点

在函数组件中通过使用myRef.current来访问ref

三、react事件和普通的html事件有什么不同

react事件和普通的html事件有以下区别

react为了确保跨浏览器的一致性，使用了合成事件，而在html原生事件中，事件处理器直接接触到浏览器的原生事件对象

react中事件命名使用驼峰命名发，后跟事件函数，而html原生事件命名全部小写，后跟JS代码

react使用事件委托机制，有助于减少内存提高浏览器性能，而在html原生事件中，需要手动实现事件委托。

以上区别使得react的事件处理更加一致，易于管理，同时也提高了跨浏览器的一致性

四、React 组件中怎么做事件代理？它的原理是什么？

事件代理是一种优化事件处理的技术，react本身已经在底层使用了事件代理，但也可以手动实现事件代理来进一步优化性能。

原理：事件代理的核心思想是将事件绑定到一个共有的父元素上，而不是直接绑定到每个子元素上。当事件触发时，事件会冒泡到父元素，父元素通过e.target属性来判断事件的触发者，并执行相应的逻辑。

优点：

减少内存占用：不需要为每个子元素绑定事件

动态元素支持：当动态的添加或者删除子元素的时候，也不需要重新绑定或解绑事件

性能优化：减少了事件绑定的数量，提高了性能。

五、React组件的构造函数有什么作用？它是必须的吗？

构造函数在类组件中主要初始化局部状态和绑定事件处理器，但是他不是必须的，随着类属性和箭头函数的使用，以及函数组件和hooks的运用，构造函数的使用频率大大降低。

六、在React中如何避免不必要的render

使用React.memo包裹函数组件

React.memo是一个高阶组件，它仅对其包裹的组件在props发生变化时才重新渲染。这对于优化性能非常有用，尤其是当你知道一个组件在特定props没有变化时不需要更新时。

css 复制代码

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

使用shouldComponentUpdate生命周期方法

对于类组件，你可以使用shouldComponentUpdate生命周期方法来阻止组件的不必要更新。这个方法允许你通过比较当前和下一个state或props来决定组件是否需要更新

css 复制代码

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 返回true或false来控制组件是否应该更新
  }
}

使用PureComponent

React.PureComponent与React.Component相似，但PureComponent通过对props和state进行浅比较来减少不必要的渲染。

css 复制代码

class MyComponent extends React.PureComponent {
  // Your component logic
}

使用useMemo和useCallback钩子

对于函数组件，useMemo和useCallback可以帮助你避免不必要的渲染。useMemo可以用来缓存计算结果，只有在其依赖项变化时才重新计算。useCallback则用于缓存函数，确保函数身份在依赖项不变的情况下保持不变。这些都有助于避免因为不必要的更新导致的渲染。

css 复制代码

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);