前端-陈旭辉-20230714

一、学习内容

1.组件性能优化

三种组件更新的情况：

• 调用 forceUpdate 方法强制更新
• 调用 setState 方法更新数据
• props 值发生变化时
  
  

当一个组件进行更新时，不但会更新自己，也会更新后代组件。但是不会更新父组件和兄弟组件

1.1减轻state

目标： ==降低页面更新的频率== （只要state中数据发生改变，页面就会重载）

有三种数据需要放在 state 中：

   1)  不会渲染到页面上的数据

   2)  不会发生变化的数据

   3)  即使变化也不会影响页面的渲染

1.2减少不必要的渲染

组件更新机制：当一个组件进行更新时，不但会更新自己，也会更新后代组件。但是不会更新父组件和兄弟组件

存在的问题： 子组件没有变化，但是因为父组件发生了更新，所以子组件也要进行更新。这种更新是没有必要的，只会浪费系统性能

解决方案： 钩子函数 shouldComponentUpdate 用来判断组件是否需要更新

执行机制： 在执行 render 渲染页面前会先调用 shouldComponentUpdate 来判断是否需要进行渲染，如果返回值为true则进行渲染，反之则不渲染  （shouldComponentUpdate --> render）

2.state

在 shouldComponentUpdate 方法中可以使用两个数据

• nextState： state更新后的值
• this.state： 未更新之前的值
• 判断更新后的值和更新前的值是否发生变化，如果发生变化则返回 true，进行更新；如果没有变化则返回false 不执行更新
  
  

3.props

• shouldComponentUpdate 方法中的另外两个数据
  
  
  • nextProps： props 更新后的值
  • this.props： props 未更新前的值
  • 判断两次props中的值，来决定是否要更新
  • 注意： 当子组件不渲染时，父组件也不要进行渲染
    
    

4.纯组件

纯组件： React.PureComponet 与 React.Component 功能相似，也可以用来实现类组件

作用： 纯组件内部自动实现了 shouldComponentUpdate 钩子函数，也就是说 纯组件内部会自动比对前后两次 props 和 state 的值来决定是否需要重新渲染