React总结9：JSX的自动转义编码

JSX字符串处理的时候，React会自动将字符串进行转义处理，所以下面两个语句是等价的。

<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

我们可以在组件之间增加字符串字面量，当然这个字面量可以是HTML语句，但是需要注意一点的是，这里的字符串字面量是没有被编码的。即当我们通过大括号进行表达式插入时，默认是进行编码的，而你自己增加的内容是不会被编码的，所以在这里我们可以像在HTML中用标签一样在这里用，比如空格的话我们就需要用&才能真的隔离开字符串

<div>This is valid HTML &amp; JSX at the same time.</div>

这样的原因是，JSX会自动删除空格符，换行符，等等。

<div>Hello World</div>

<div>
  Hello World
</div>

<div>
  Hello
  World
</div>

<div>

  Hello World
</div>

上述的四种情况的最终视图呈现结果是一样