ReactJS - 无 JSX 的 React

在本节中，我们将学习如何使用 createElement 创建 React 组件，而不是默认的 JSX。

什么是 JSX？

JSX 是 JavaScript 的扩展，用于使用类似 HTML 的语法创建任意 HTML 元素。这将简化 HTML 文档的创建，并易于理解文档。React 会在执行之前将 JSX 转换为包含 React 的 createElement 函数调用的 JavaScript 对象。

它提高了应用程序的性能。此外，React 还允许使用纯 createElement 函数创建 HTML 文档，而无需使用 JSX。这使开发人员能够在 JSX 不适合的情况下直接创建 HTML 文档。

什么是 createElement？

React.createElement 是 React 的核心 API，用于生成和渲染 HTML 文档。createElement 方法有三个参数：

• 组件名称

• 作为对象的 props

• 组件的内部内容/子元素

这里，子元素可以指另一个组件，该组件再次使用 createElement 创建。createElement 可以嵌套到任何级别。使用 React.createElement 创建组件的示例代码如下：

React.createElement('h1', null, 'Hello World')

这将渲染下面提到的 HTML 文档

<h1>Hello World</h1>

工作示例

让我们创建一个名为 BookListUsingCreateElement 的组件来学习和理解 createElement 方法。

首先，使用 create-react-app 创建一个新应用程序

create-react-app myapp

然后，在 components 文件夹下添加一个新的组件 BookListUsingCreateElement。初始代码如下：

import React from 'react'
class BookListUsingCreateElement extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         list: ['C++ Programming', 'Java Programming', "JavaScript Programming"]
      };
   }
}
export default BookListUsingCreateElement

这里，list 是组件中可用的书籍的初始集合。

现在，让我们在 render 函数中使用 createElement 渲染书籍，如下所示。

render() {
   let content = React.createElement(
      'ol',
      null,
      this.state.list.map(
         (item) =>
         React.createElement('li', null, item)
      )
   )
   return content;
}

这里，我们在两个地方使用了 createElement。首先，我们使用它来创建组件的最顶层，即 ul HTML 元素。其次，我们多次使用 createElement 根据 list 中可用的书籍创建 li 元素。我们使用了 map 函数来循环遍历列表中的所有书籍，并使用 React.createElement('li', null, item) 代码为每本书创建一个 li 元素。

最后，组件的完整代码如下

import React from 'react'
class BookListUsingCreateElement extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         list: ['C++ Programming', 'Java Programming', "JavaScript Programming"]
      };
   }
   render() {
      let content = React.createElement(
         'ol',
         null,
         this.state.list.map(
            (item) =>
            React.createElement('li', null, item)
         )
      )
      return content;
   }
}
export default BookListUsingCreateElement

让我们通过 App.js 使用我们新创建的组件，如下所示：

import BookListUsingCreateElement from "./components/CreateElement/BookListUsingCreateElement";
function App() {
   return (
      <div>
         <BookListUsingCreateElement />
      </div>
   );
}
export default App;

现在，使用以下命令运行应用程序

npm start

应用程序将在默认浏览器中启动并显示以下结果