ReactJS - 没有 JSX 的 React

在本章中，让我们学习如何使用 createElement 来创建 react 组件而不是默认的 JSX。

什么是 JSX？

JSX 是一个 JavaScript 扩展，用于使用类似于 HTML 的语法创建任意 HTML 元素。这将简化 HTML 文档的创建，并且易于理解文档。React 会在执行 JSX 之前将 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 创建一个新应用程序

然后，在 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 根据列表中可用的书籍创建 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;

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

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