react该不该使用jsx_如何在不使用React的情况下使用JSX

react该不该使用jsx

I’m personally a big fan of JSX and love the way it allows me to split up and componentize my code. Even though JSX had been around before React, it wouldn’t have been nearly as popular without React picking it up. However, we can actually use JSX without React, and it’s not that difficult either.

我个人是JSX的忠实拥护者，并且喜欢它允许我拆分和组件化代码的方式。 即使JSX在React之前就已经存在，但如果没有React的支持，它就不会那么受欢迎。 但是，实际上我们可以在没有React的情况下使用JSX，这也不是那么困难。

The way React works is by configuring your bundler to convert JSX into calls to a createElement function. So for example:

React的工作方式是通过配置捆绑器将JSX转换为对createElement函数的调用。 因此，例如：

However, most bundlers allow you to choose your own JSX pragma (function that will be in the place of React.createElement). For example, if you were using Babel, you could specify what function to use through a simple comment like this:

但是，大多数捆绑程序允许您选择自己的JSX 编译指示 (该功能将代替React.createElement )。 例如，如果您使用的是Babel，则可以通过以下简单注释指定要使用的功能：

And now Babel would pass those some parameters to myJsxFunction. Now all we need to do is create a function that takes these parameters and creates real DOM nodes that we can add to our DOM. So let’s get started. (If you need a code sandbox to play around in, you can use this static template using standalone Babel.)

现在Babel会将那些参数传递给myJsxFunction 。 现在，我们要做的就是创建一个使用这些参数的函数，并创建可以添加到DOM中的真实DOM节点。 因此，让我们开始吧。 (如果您需要一个代码沙箱来进行操作，则可以使用独立的Babel使用此静态模板 。)

DOM nodes are created using the document.createNode() function. It requires just a tag name, so a good place to start would be with that:

DOM节点是使用document.createNode()函数创建的。 它只需要一个tag名称，因此一个不错的起点是：

Now that we have a DOM node, we have to actually add the attributes provided to us. These can be anything like class or style. So we’ll just loop through all the provided attributes (using Object.entries) and just set them on our DOM node:

现在我们有了一个DOM节点，我们实际上必须添加提供给我们的属性。 这些可以是class或style 。 因此，我们将遍历所有提供的属性(使用Object.entries )，并将其设置在我们的DOM节点上：

This approach has one issue, though. How do we handle events? For example, let’s say I have this JSX:

但是，这种方法有一个问题。 我们如何处理事件？ 例如，假设我有这个JSX：

Our function would set onClick as a normal attribute with the callback set as actual text.

我们的函数会将onClick设置为普通属性，并将回调设置为实际文本。

Instead what we can do is check if our attribute starts with on and is in the window scope. This will tell us if it’s an event or not. For example, onclick is in the window scope; however, onfoo isn’t. If it is, then we can register an event listener on that node using the part of the name without the on.

相反，我们可以做的是检查我们的属性是否以on开头并且在窗口范围内。 这将告诉我们是否是事件。 例如， onclick在窗口范围内； 但是， onfoo不是。 如果是，那么我们可以使用名称的一部分而不在on在该节点上注册事件侦听器。

This is how it looks:

看起来是这样的：

Nice! Now all that’s left to do is to add all the children to the parent. However, you can’t append a string to a DOM node, so in case the child isn’t also a node, we can create a text node and append that instead:

真好！ 现在剩下要做的就是将所有子代添加到父代。 但是，您不能将字符串追加到DOM节点，因此，如果子节点也不是节点，我们可以创建一个文本节点并将其追加：

However, this quickly runs into issues with deeply nested elements and also elements that are created using array maps. So instead, let’s replace that part with a recursive appendChild method:

但是，这很快就会遇到深度嵌套的元素以及使用数组映射创建的元素的问题。 因此，让我们用递归的appendChild方法替换该部分：

And now we can use this in place of our old method:

现在，我们可以使用它代替旧方法：

It works! Try it out. We can now render basic JSX to the DOM:

有用！ 试试看。 现在，我们可以将基本的JSX渲染到DOM：

And you should see your JSX rendered out perfectly. There are a few more things we can add, though; for example, in React, elements are usually functions. Implementing this will allow us to nest components and take full advantage of props, which are a crucial feature of JSX.

而且您应该看到JSX完美呈现出来。 不过，我们还可以添加其他一些内容。 例如，在React中，元素通常是函数。 实现此功能将使我们能够嵌套组件并充分利用道具，而道具是JSX的关键功能。

Thankfully, it’s pretty simple to implement. All we have to do is check if the tag name is a function instead of a string. If it is, we don’t do any of the other stuff but rather just call the function. Here’s how it looks:

幸运的是，它非常容易实现。 我们要做的就是检查tag名称是否是函数而不是字符串。 如果是这样，我们不执行其他任何操作，而只是调用该函数。 外观如下：

And now let’s try that out:

现在让我们尝试一下：

As you can see, implementing that allowed us to use props as well! You can actually say we’re done here, but there’s one more feature I want to implement: fragments. For those not familiar, fragments are a way to have empty containers in JSX, and they use empty tags. Example:

如您所见，实现该功能还允许我们使用道具！ 您实际上可以说我们已经完成了，但是我想实现另外一个功能：片段。 对于不熟悉的人， 片段是在JSX中使用空容器的一种方法，并且它们使用空标签。 例：

But for this to work, we need a function that takes this fragment, and instead of creating a DOM element, it just returns its children. Here’s how it looks:

但是要使其正常工作，我们需要一个带有该片段的函数，而不是创建DOM元素，而只是返回其子元素。 外观如下：

It works out of the box because of our recursive appendChild method.

由于我们的递归appendChild方法，它可以立即使用。

And that’s it! We’ve done it. A super simple JSX-to-DOM function that lets us use the power of JSX without having to use rReact specifically. You can find the source code for it in this CodeSandbox.

就是这样！ 我们已经做到了。 超级简单的JSX-to-DOM函数，使我们可以使用JSX的功能，而不必专门使用rReact。 您可以在此CodeSandbox中找到其源代码。

I hope you found this article helpful, I also hope you find some cool ways to use the power of JSX. I actually learned about all of this while working on Dhow, which is a JSX-powered static-site generator for Node.js. It basically lets you write Next.js style code but converts it to static HTML without any hydration qualms.

希望本文对您有所帮助，也希望您找到一些使用JSX强大功能的不错方法。 在研究Dhow时 ，我实际上了解了所有这些信息， Dhow是Node.js的JSX支持的静态站点生成器。 它基本上可以让您编写Next.js样式的代码，但可以将其转换为静态HTML，而无需任何水化限制。

翻译自: https://medium.com/better-programming/how-to-use-jsx-without-react-21d23346e5dc

react该不该使用jsx