ReactJS 纯组件

通常，在ReactJS中，我们使用shouldComponentUpdate()生命周期方法来自定义默认行为，并在 React 组件应该重新渲染或更新自身时实现它。

先决条件：

• ReactJS 组件
• ReactJS 组件 – 第 2 组

现在， ReactJS为我们提供了一个Pure Component 。如果我们用纯组件扩展一个类，就不需要shouldComponentUpdate()生命周期方法。 ReactJS 纯组件类将当前状态和道具与新的道具和状态进行比较，以决定 React 组件是否应该重新渲染自己或 不是。

简单来说，如果 state 或 props 之前的值与 state 或 props 的新值相同，则组件不会重新渲染自己。由于Pure Components在不使用组件的重新渲染时会限制重新渲染。纯组件是扩展React.PureComponent的类组件。

示例：演示创建纯组件的程序。

javascript

import React from ‘react’;
  
export default class Test extends React.PureComponent{
   render(){
      return 
Welcome to GeeksforGeeks
;
   }
}

输出：

使用纯组件扩展 React 类组件可确保组件的更高性能并最终使您的应用程序更快，而在常规组件的情况下，它总是会重新渲染 State 和 Props 的值是否发生变化。

在使用纯组件时，需要注意的是，在这些组件中，State 和 Props 的值是浅比较（Shallow Comparison），并且它还隐式地处理了“ shouldComponentUpdate ”生命周期方法。
所以有可能如果这些 State 和 Props 对象包含嵌套的数据结构，那么Pure Component实现的shouldComponentUpdate将返回 false 并且不会更新整个 此类组件的子项的子树。所以在纯组件中， 嵌套数据结构无法正常工作。

在这种情况下，State 和 Props 对象应该是简单对象，而 Child Elements 也应该是 Pure，这意味着在任何实例中为相同的输入值返回相同的输出。