ReactJS 中的纯函数式组件是什么？

什么是 JavaScript函数？

JavaScript函数是设计用于执行特定任务的代码块，该任务在被调用时执行。

React 函数式组件与 JavaScript 函数有何相似之处？

从概念上讲，组件就像 JavaScript 函数。函数式组件是在 React 中返回 JSX 的 JavaScript函数。这些函数接受任意输入（通常称为“道具”）并返回描述应该出现在屏幕上的 React 元素。

当一个 React 组件是纯的？

如果返回值仅由其输入值确定，并且对于相同的输入值，返回值始终相同，则称该函数为纯函数。

如果 React 组件为相同的 state 和 props 呈现相同的输出，则称它是纯组件。对于 React 纯类组件，React 提供了 PureComponent 基类。扩展 React.PureComponent 类的类组件被视为纯组件。

创建反应应用程序：

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

  npx create-react-app pure-react

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

  cd pure-react

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

文件名：App.js

geekscore.js

import React from 'react';
  
class GeeksScore extends React.PureComponent {
  
  render() {
    const { score, total = Math.max(1, score) } = this.props;
  
    return (
      

        
Geeks Score
        { Math.round(score / total * 100) }%
      
    )
  }
  
}
  
export default GeeksScore;

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

npm start

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

为什么选择纯组件？

纯组件有一些性能改进和渲染优化，因为 React 为它们实现了 shouldComponentUpdate() 方法，并对 props 和 state 进行了浅比较。

React 中的纯函数式组件是什么？

函数式组件在 React 中非常有用，尤其是当我们想要将状态管理与 React 组件隔离时。这就是为什么它们通常被称为无状态组件。

但是，功能组件不能利用React.PureComponent 带来的性能改进和渲染优化，因为它们不是定义的类。

优化功能组件，以便 React 可以将其视为纯组件，不一定需要将组件转换为类组件。为了在 React 中创建一个纯函数式组件，React 提供了一个React.memo() API。使用React.memo() API，可以将 React 功能组件包装如下，以获得 React 纯功能组件。

关于 React.memo() API 的一些重要的事情是：

• React.memo()是一个高阶组件，它将一个 React 组件作为其第一个参数并返回一个纯 React 组件。
• 使用React.memo()返回的 React 组件类型允许渲染器在记忆输出的同时渲染组件。
• React.memo()也适用于使用 ReactDOMServer 的组件 w。

应用程序.js

import React from 'react';
import GeeksScore from './geekscore';
  
export default function App() {
  return (
    

      
    
  );
}

geekscore.js

import React, { memo } from 'react';
  
function GeeksScore({ score = 0, total = Math.max(1, score) }) {
  return (
    

      
Geeks Score
      { Math.round(score / total * 100) }%
    
  )
}
  
export default memo(GeeksScore);

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

npm start

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