前端一面高频react面试题（持续更新中）

最新推荐文章于 2024-04-16 10:45:35 发布

beifeng11996

最新推荐文章于 2024-04-16 10:45:35 发布

阅读量467

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/beifeng11996/article/details/127547290

版权

本文主要讨论React性能优化、常见问题以及组件生命周期。讲解了如何避免组件不必要的重新渲染，使用PureComponent和shouldComponentUpdate优化，以及refs的用途。还涵盖了React的事件处理、Redux中间件、虚拟DOM的优势和React Native的端口问题。此外，文章还探讨了React组件更新方法、key的作用，以及高阶组件、Render Props和Hooks的区别。

摘要由CSDN通过智能技术生成

如何避免组件的重新渲染？

React 中最常见的问题之一是组件不必要地重新渲染。React 提供了两个方法，在这些情况下非常有用：

React.memo():这可以防止不必要地重新渲染函数组件
PureComponent:这可以防止不必要地重新渲染类组件
这两种方法都依赖于对传递给组件的props的浅比较，如果 props 没有改变，那么组件将不会重新渲染。虽然这两种工具都非常有用，但是浅比较会带来额外的性能损失，因此如果使用不当，这两种方法都会对性能产生负面影响。
通过使用 React Profiler，可以在使用这些方法前后对性能进行测量，从而确保通过进行给定的更改来实际改进性能。

React 性能优化

shouldCompoentUpdate
pureComponent 自带shouldCompoentUpdate的浅比较优化
结合Immutable.js达到最优

说说你用react有什么坑点？

1. JSX做表达式判断时候，需要强转为boolean类型

如果不使用 !!b 进行强转数据类型，会在页面里面输出 0。

render() {
  const b = 0;
  return <div>
    {
      !!b && <div>这是一段文本</div>
    }
  </div>
}

2. 尽量不要在 componentWillReviceProps 里使用 setState，如果一定要使用，那么需要判断结束条件，不然会出现无限重渲染，导致页面崩溃

3. 给组件添加ref时候，尽量不要使用匿名函数，因为当组件更新的时候，匿名函数会被当做新的prop处理，让ref属性接受到新函数的时候，react内部会先清空ref，也就是会以null为回调参数先执行一次ref这个props，然后在以该组件的实例执行一次ref，所以用匿名函数做ref的时候，有的时候去ref赋值后的属性会取到null

4. 遍历子节点的时候，不要用 index 作为组件的 key 进行传入

组件是什么？类是什么？类变编译成什么

组件指的是页面的一部分，本质就是一个类，最本质就是一个构造函数
类编译成构造函数

React 中 refs 的作用是什么

Refs 是 React 提供给我们的安全访问 DOM元素或者某个组件实例的句柄
可以为元素添加ref属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回

在 Reducer文件里，对于返回的结果，要注意哪些问题？

在 Reducer文件里，对于返回的结果，必须要使用 Object.assign ( )来复制一份新的 state，否则页面不会跟着数据刷新。

return Object.assign({
   }, state, {
   
  type: action.type,
  shouldNotPaint: true,
});

setState方法的第二个参数有什么用？使用它的目的是什么？

它是一个回调函数，当 setState方法执行结束并重新渲染该组件时调用它。在工作中，更好的方式是使用 React组件生命周期之——“存在期”的生命周期方法，而不是依赖这个回调函数。

export class App extends Component {
   
  constructor(props) {
   
    super(props);
    this.state = {
   
      username: "雨夜清荷",
    };
  }
  render() {