1. MD5介绍

MD5（Message Digest Algorithm 5）是一种常见的哈希函数，通常用于产生数据的数字摘要，也称为哈希值或摘要值。它是由Ron Rivest在1991年设计的，广泛用于数据完整性验证、密码存储、数字签名等领域。

MD5哈希函数通过将任意长度的数据映射为固定长度的128位哈希值，这个哈希值通常以32个十六进制字符的形式表示。

示例：

原始值：123
哈希值：487f7b22f68312d2c1bbc93b1aea445b //哈希值由32个十六进制字符组成

MD5哈希函数是一种单向散列函数，这意味着该算法可以从输入的数据中获取其哈希值，但是几乎不可能从哈希值还原出原始数据。因此，MD5主要用于数据的完整性验证，而不是加密。

• 数据完整性验证

MD5算法用于数据完整性校验的基本原理是利用该算法的两个特性，一致性和不可逆性。一致性指的是对于相同的输入数据，MD5算法总是生成相同的MD5哈希值。这就意味着，如果两个相同的数据块经过MD5哈希，它们的哈希值将始终相等。不可逆性指的是不能从哈希值中还原出原始数据，因此，如果输入数据发生了任何变化，其MD5哈希值也将发生显著的变化。

数据完整性验证的流程主要如下：

2. JavaScript 代码实现

可以使用现有的库来进行MD5哈希算法。一个流行的库是CryptoJS。以下代码给出了在React框架下的类组件中，实现md5哈希映射的过程。

首先要使用npm安装 CryptoJS 库：

npm install crypto-js

在React的类组件中使用CryptoJS进行MD5加密：

import React, { Component } from 'react';
import CryptoJS from 'crypto-js';

class MyComponent extends Component {
  handleMD5 = (data) => {
    const MD5Data = CryptoJS.MD5(data).toString();
    console.log(MD5Data, '========MD5数据=========');
  };

  render() {
  	let data = 123;
  	console.log(data,'========原始数据==========');
    return (
      <div>
        <button onClick={() => this.handleMD5 (data)}>
          MD5哈希映射
        </button>
      </div>
    );
  }
}

export default MyComponent ;

效果：