react中组件为什么是单闭合标签

Question

import React, { Component } from 'react'
import './App.scss'
import NavBar from './components/NavBar/NavBar'

export default class App extends Component {
render() {

return (
  <div className="App">
    <header className="App-header">
      <h1 className="App-title">Listen Music</h1>
    </header>
    <NavBar />
  </div>
)

}
}

其中，<NavBar />为什么不是写成<NavBar><NavBar/>

Answer 1

如果标签不需要包裹其他内容本来就可以写成这样，常见的就是 input 了：

<input type="text" />

Answer 2

非闭合的写法也是合法的，前端编码过程中很多地方的约束是松散的，为提高代码可阅读性渐渐形成了不成文的规范

Answer 3

react 里面的jsx和html标签样子上差不多，但是事实上完全不是一套东西，这个和HTML的自闭合标签不一样。

实际上写法对应的js代码如下， 根本不是html，在react-dom会使用document.createElement 去创建dom，参数差别如下；