HTML 中 data-reactid 属性的用途是什么？

data-reactid属性是一个自定义属性，react 可以轻松识别 DOM 中的组件。就像 HTML 的“classes”和“id”属性一样，“data-reactid”有助于唯一标识元素。

由于在服务器和客户端之间以序列化顺序共享整个对象引用可能会很昂贵。因此，在内部使用这些 id 的 react 会构建 DOM 中存在的节点（用于构建应用程序）的引用的表示。当应用程序呈现并在客户端加载反应时，它与服务器共享的唯一数据是“data-reactid”属性。

然后“data-reactid”属性转换回提供的数据结构并显示数据，而无需在客户端实际呈现整个数据结构。

示例：使用 app.js中的“react-id”属性从文件Data.js导入数据）。

数据.js

export const Data=[
{
 id: '.1',
 node: Div,
 children: [
   {
     id: '.2',
     node: Span,
     children: [
       {
         id: '.2’,
         node: Input,
         children: []
       }
    ]}
     ]
}];

应用程序.js

import React, { Component } from 'react';
import {Data} from './src/data';
class App extends Component{
    render(){
        return(
            

                
                  
                
            
               );
        }
}