使用 document.createElement、React.createElement 和 JSX 实现函数式组件
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
上周我旁听了Lambda School的学生们学习如何使用原生JavaScript创建可复用的函数式组件。这周他们将学习如何在React中创建函数式组件。为了帮助他们更好地衔接知识，我将他们用原生JavaScript编写的组件分别用React.createElement和JSX重新创建。
那么，让我们开始吧。
首先，我们来看一个原生的 JavaScript 组件。目标是创建一个可复用的面板组件。（为了方便阅读，我省略了一些与本文无关的代码和目标。）
学生们学习了函数式组件以及如何使用 document.createElement 向 DOM 添加元素。
我想展示如何使用 React.createElement 和 JSX 以“React 的方式”来实现这个功能。
我们先来看看 React.createElement。
React.createElement
var Panel = function Panel(props) {
var title = props.title,
content = props.content;
return React.createElement(
"div",
{
className: "panel"
},
React.createElement(
"div",
{
className: "panel-bar"
},
React.createElement("h3", null, title),
React.createElement(
"div",
{
className: "panel-buttons"
},
React.createElement(
"button",
{
className: "panel-btn-open"
},
"Open"
),
React.createElement(
"button",
{
className: "panel-btn-close hide-btn"
},
"Close"
)
)
),
React.createElement(
"div",
{
className: "panel-content"
},
content
)
);
};
从上面的代码可以看出，React.createElement 的方式与使用 document.createElement 的方式非常相似。
React.createElement
React.createElement(
"button",
{
className: "panel-btn-open"
},
"Open"
),
document.CreateElement
const buttonOpen = document.createElement('button');
buttonOpen.classList.add('panel-btn-open');
buttonOpen.textContent = 'Open';
我们创建一个元素，在本例中是一个div元素。我们给它添加一个类名panel-btn-open，并给它添加文本内容“打开”。
这两种方法都能实现相同的功能，但都非常冗长。
这时就需要用到 JSX 了。
JSX
JSX 的外观几乎与 HTML 完全相同，但它允许使用 JavaScript 为组件添加更多功能。
以下示例展示了我们的 JSX 代码与使用 React.createElement 实现的代码的对比。
const Panel = props => {
const { title, content } = props;
return (
<div className="panel">
<div className="panel-bar">
<h3>{title}</h3>
<div className="panel-buttons">
<button className="panel-btn-open">Open</button>
<button className="panel-btn-close hide-btn">Close</button>
</div>
</div>
<div className="panel-content">{content}</div>
</div>
);
};
在我看来，这种方法比前两种方法更容易阅读和理解。
我们像之前一样创建每个元素，给它们命名，并添加文本内容。
本文简要比较了使用 document.createElement、React.createElement 和 JSX 创建组件的方法，希望能帮助大家理解每种方法的用法。您可以查看这个 CodeSandbox 示例，了解这里使用的所有代码，以及我们如何使用 props 和一种获取数据的方法。