React.Component 和 React.PureComponent 之间的区别？

组件是 React 的核心构建块之一。换句话说，我们可以说，您将在 React 中开发的每个应用程序都由称为组件的部分组成。但是 React 有两种类型的组件：

1. React.PureComponent：它是优化 React 应用程序的最重要的方法之一。通过使用纯组件，不需要 shouldComponentUpdate() 生命周期方法，因为 ReactJS 纯组件类将当前状态和 props 与新的 props 和状态进行比较，以决定组件是否应该重新渲染。
2. React.Component：但另一方面，每当传递给它的 props 发生变化、父组件重新渲染或调用 shouldComponentUpdate() 方法时， React.Component 都会重新渲染自身。它不会优化 React 应用程序。它们实现起来既简单又快速，也适用于重新渲染无关紧要的非常小的 UI 视图。它们提供更简洁的代码和更少的文件来处理。

何时使用 React.PureComponent？

如果满足以下任何条件，您可以选择 React.PureComponent 而不是React.Component ：

• State/Props 应该是一个不可变的对象
• 状态/道具不应该有层次结构
• 数据更改时应调用 forceUpdate()

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app functiondemo

第 2 步：创建项目文件夹（即 functiondemo）后，使用以下命令移动到该文件夹：

cd functiondemo

项目结构：它将如下所示。

项目结构

示例：在此示例中，我们将构建一个名称颜色应用程序，当组件在 DOM 树中呈现时，它会更改文本的颜色。

App.js：现在在 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

使用 React.Component：

Javascript

import React from 'react';
  
class Comp1 extends React.Component {
  render() {
    console.log('Child Component is called');
    return 
{this.props.value}
;
  }
}
  
class App extends React.Component {
  state = { color: 'black' };
  render() {
    return (
      

        
         this.setState({ color: 'green' })}>
          Change Color
        
      
    );
  }
}
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

使用 React.PureComponent：

Javascript

import React from 'react';
  
class Comp1 extends React.PureComponent {
  render() {
    console.log('Child Component is called');
    return 
{this.props.value}
;
  }
}
  
class App extends React.Component {
  state = { color: 'black' };
  render() {
    return (
      

        
         this.setState({ color: 'green' })}>
          Change Color
        
      
    );
  }
}
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

结论：

如果您使用React.Component ，那么如果父组件重新渲染自身，则子组件也会重新渲染，但在 React.PureComponent 中，子组件仅在传递给它的 props 更改时才会重新渲染。