react性能优化——组件嵌套中的render调用问题

最新推荐文章于 2023-06-14 17:05:50 发布

秃头的科比

最新推荐文章于 2023-06-14 17:05:50 发布

阅读量817

点赞数

分类专栏： React 文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_43933771/article/details/118873281

版权

文章探讨了在React组件嵌套中遇到的渲染性能问题。当父组件render时，所有子组件也会被重新渲染。为解决这个问题，文章提出了三种策略：一是通过shouldComponentUpdate()生命周期函数阻止不必要的渲染，但需要手动判断数据变化；二是使用PureComponent，进行浅层比较，但仅适用于类组件；三是对函数式组件使用memo函数进行优化，同样进行浅层比较。然而，React官方并不建议深度比较，因为可能影响性能。

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

组件嵌套中的render调用问题

当父组件的render函数被调用执行时，其所有子组件的render函数也都会被重新调用执行，因此性能必然是很低的，那么当它们在调用render前应该有一个前提就是只有当所依赖的state或者props发生改变时，再去重新调用render方法。

解决方式一(不推荐)：当有些组件所依赖的数据未发生改变也就是不需要render时，可以利用shouldComponentUpdate()生命周期函数，它默认返回true将其改为false，从而可以阻断所有render的重新渲染，因此方式一的弊端：

（1）只适用于类组件。

（2）但是直接改为false的话，那么所有组件所依赖的数据即使发生了变化也不会去重新render，因此需要很麻烦的去给每个类组件中的数据都要去做判断，判断什么时候返回true什么时候返回false。

import React, {
   Component} from 'react';

export default class App extends Component {
   
  constructor(props) {
   
    super(props);

    this.state = {
   
      counter: 0,
      message: "Hello World"
    }
  }

  //注意：它的两个参数 
  shouldComponentUpdate(nextProps, nextState)