# 为什么 React 要用 JSX
到道题也不是说 JSX 的好处，而是先说为什么要用 JSX ，为啥不用其他的方式。
主要考察两方面能力： 技术广度：深挖知识面涉猎广度，对流行框架的模板方案是否熟悉了解 技术调研能力
使用 三步走技巧
- 一句话解释 JSX JSX 是一个 JavaScript 的语法扩展，或者说是一个类似于 XML 的 ECMAScript 语法扩展
- 核心概念 React 本身并不强制使用 JSX ，可以用 React.createElement，即使使用了 JSX，也会在构建过程中，通过 Babel 插件编译为 React.createElement,所以 JSX 更像是 React.createElement 的一种语法糖。从这可以看出 React 团队并不想引入 JavaScript 本身以外的开发体系，而是希望通过合理的关注点分离保持组件开发的纯粹性。
- 方案对比
- 模板：React 团队认为模板不应该是开发过程中的关注点，因为引入了模板语法，模板指令等概念，是一种不佳的实现方案。
- 模板字符串：模板字符串编写的结构会造成多次内部嵌套，使整个结构变得复杂，并且优化代码提示也变得困难重重。
- JSON ：同样因为代码提示困难的原因而被放弃。
- JSX：因为 JSX 与其设计思想贴合，不需要引入过多的新的概念，对编译器的代码提示也及其友好
react的设计初衷：关注点分离,在计算机科学中，是将代码分割为不同部分的设计原则是面向对象的程序设计的 ”核心概念“ 关注点分离的价值在于简化程序的开发和维护，当关注点分开时，各个部分可以重复使用，以及独立开发和更新具有特殊价值的是能够在稍微改进，而无须知道其他部分的细节必须对这些部分机型相应的更改。关注点的基本单位是”组件“。
# 答题
在回答问题之前，我首先解释下什么是 JSX 吧。JSX 是一个 JavaScript 的语法扩展，结构类似 XML。
JSX 主要用于声明 React 元素，但 React 中并不强制使用 JSX。即使使用了 JSX，也会在构建过程中，通过 Babel 插件编译为 React.createElement。所以 JSX 更像是 React.createElement 的一种语法糖。
所以从这里可以看出，React 团队并不想引入 JavaScript 本身以外的开发体系。而是希望通过合理的关注点分离保持组件开发的纯粹性。
接下来与 JSX 以外的三种技术方案进行对比。
首先是模板，React 团队认为模板不应该是开发过程中的关注点，因为引入了模板语法、模板指令等概念，是一种不佳的实现方案。
其次是模板字符串，模板字符串编写的结构会造成多次内部嵌套，使整个结构变得复杂，并且优化代码提示也会变得困难重重。
最后是 JXON，同样因为代码提示困难的原因而被放弃。
所以 React 最后选用了 JSX，因为 JSX 与其设计思想贴合，不需要引入过多新的概念，对编辑器的代码提示也极为友好。