RN前端路之自闭合标签写惯RN的人会发现，RN中所有的标签都可以自闭合,不管是容器还是非容器类标签带着这种习惯，在写h

写惯RN的人会发现，RN中所有的标签都可以自闭合,不管是容器还是非容器类标签

<View />
<Image />

带着这种习惯，在写html的时候，可能会写出这种代码

<html>
    <body>
        <div style="height: 300px;background-color: green;">
            <div style="height: 100%;background-color: yellow;" />
            <div style="height: 70px; background-color: black;" />
        </div>
    </body>
</html>

但是渲染出来会发现跟你想象的不太一样

<html><head></head><body>
    <div style="height: 300px;background-color: green;">
        <div style="height: 100%;background-color: yellow;">
        <div style="height: 70px; background-color: black;">
    </div>

</div></div></body></html>

嗯，发现问题就可以，原来在html只有部分的标签是可以自闭合的常见的有下面这些

<input>：定义一个输入框
<meta>:提供有关页面的元信息
<link>:定义文档与外部资源之间的关系,通常用来连接样式表
<br>:用来换行
<hr>:定义一个水平线
<img>:定义 HTML 页面中的图像

像<div /> <span />这种都是是非法的，那么问题来了，这种错误的逻辑浏览器会怎么对待，通过探索....嗯，搜索，找到如下链接的下面这段话 stackoverflow.com/questions/1…

Because the
is erroneously treated by browsers as a not yet closed
tag. So everything that goes after it is considered to be inside of it. Since the tag is never finished in the rest of the document, the document itself is malformed and results in rendering discrepancies.

也就是说在<div />这种会将它后面的代码都包含为它的子元素，由于上面的解释不是很清楚，到底是包含兄弟节点，还是只要是后面的代码都包含，继续试验

<html>
    <body>
        <div style="height: 300px;background-color: green;">
            <span style="height: 100%;background-color: yellow;" />
            <span style="height: 70px; background-color: black;" />
            <button>234234</button>
        </div>
        <button>121212</button>
    </body>
</html>

渲染结果

<html>
<head></head>
 <body>
        <div style="height: 300px;background-color: green;">
            <span style="height: 100%;background-color: yellow;">
                <span style="height: 70px; background-color: black;">
                    <button>234234</button>
                </span>
            </span>
        </div>
        <button>121212</button>
    
</body></html>

可见，只会影响到同一层级的元素

结论

在纯html中，只有部分标签可以自闭合，否则会导致标签将后面的兄弟节点都包含为自己的子元素
在react中，没有这些限制，所有标签都可以自闭合

后面那个结论太突兀了吧，实践得出，这里也有提及跳转,所以如果RN转web前端还是用react，以前该咋写现在还是咋写。