ReactJS中两种 处理方式的差异及成因探究

核心差异 #

• 直接写在JSX标签内的文本（比如 <div> </div>），React会正确解析HTML实体，渲染出对应的不换行空格；如果把 赋值给变量再通过{space}插入JSX，React会转义这个实体，最终页面显示的是字符串 而非空格。
• 从DOM结构看，前者生成的文本节点包含的是空格字符，后者生成的文本节点包含的是 这一串字符。

差异产生的原因 #

React对JSX里的两类内容采用了完全不同的处理逻辑：

1. 直接文本内容：属于JSX的HTML语法部分，React会按照HTML规则解析，自动把HTML实体转换成对应的字符，这和普通HTML的解析逻辑一致。
2. 表达式插入内容：也就是{}包裹的变量或JS表达式，React为了避免XSS攻击，会默认对所有输出内容做转义处理——把&、<这类特殊字符转换成HTML实体。所以当你把 （本质是 ）放进变量里，插入时会被转义成 ，最终浏览器就会把它当成普通字符串显示。

你说的“一个是文本节点，另一个为变量”是关键诱因，但本质是React针对不同输入场景的安全解析策略不同：直接文本走HTML解析逻辑，表达式内容走安全转义逻辑。

内容的提问来源于stack exchange，提问作者kevin_CN