React 渲染 HTML

React 是一个 Javascript 库，它的主要功能是帮助我们构建用户界面。React通过组件化和虚拟DOM等特性，使我们能够更轻松地开发和维护复杂的Web应用程序。

其中，React也可以用于将数据动态地渲染成HTML页面。下面是一个简单的例子，演示了如何使用React将一组数据以列表的形式呈现为HTML：

import React from 'react';
import ReactDOM from 'react-dom';

const data = [
  {id: 1, name: 'John'},
  {id: 2, name: 'Mike'},
  {id: 3, name: 'Alice'}
];

const List = () => (
  <ul>
    {data.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

ReactDOM.render(<List />, document.getElementById('root'));

在上面的代码中，我们首先定义了一组数据。然后，我们定义了一个名为List的组件，在组件中使用了Javascript的map方法遍历数据，并将每个元素渲染成一个li元素。

最后，我们使用ReactDOM.render方法将List组件渲染到页面的根元素（id为root）中。

这样，当我们在页面中引入以上代码时，就会得到一个以列表形式呈现数据的页面。

结合数据的动态渲染

上面的例子只是一个简单的静态页面，我们可以使用一些React的特性，使页面的渲染更加动态化。

例如，我们可以在页面中添加一个按钮，通过点击该按钮向data中添加一条记录：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

let id = 4;

const List = () => {
  const [data, setData] = useState([
    {id: 1, name: 'John'},
    {id: 2, name: 'Mike'},
    {id: 3, name: 'Alice'}
  ]);

  const addData = () => {
    setData([...data, { id: id++, name: 'New Name' }]);
  };

  return (
    <>
      <button onClick={addData}>Add Data</button>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  );
};

ReactDOM.render(<List />, document.getElementById('root'));

在上面的代码中，我们使用了React的useState钩子来声明一个state，其中包含我们的data和一个用于修改data的函数。addData函数通过调用setData函数，添加新的数据。

可以看到，我们在返回的“HTML”中添加了一个按钮，并将对addData函数的调用绑定到了该按钮的click事件上。

现在，我们成功实现了一个动态化的数据渲染方式。

总结

以上就是一个简单的React渲染HTML的例子。React的组件化模式和虚拟DOM特性使得我们能够更轻松地将数据转换成HTML页面，并使页面的渲染更加动态化。使用React，我们可以更高效、更全面地构建Web应用程序。