React为何要配合JSX使用

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

React开发者对于JSX再熟悉不过了，JSX伴随着React这么多年了，虽然都觉得JSX挺香的，那么为何其这么香呢？

什么是JSX

JSX是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言，但它具有 JavaScript 的全部功能。

在React中并不强制使用JSX，若是不使用

class Hello extends React.Component {
  render() {
    return React.createElement(
        'div',
        null, 
        'Hello World'
      );
  }
}

使用JSX

class Hello extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

通过上述代码对比，可以清晰的看出来JSX编写的代码更为简洁，代码层级结构更为清晰

虽然编写时使用JSX，其实其本质还是React.createElement

为什么不直接使用React.createElement呢？

当我们定义一个稍微复杂一点的DOM结构时

const ele = <div>
	<p>Hello World</p>
	<p>I' Nordon</p>
</div>;

上述代码对应React.createElement代码

const ele = React.createElement(
  "div", 
	null, 
	React.createElement(
    "p", 
    null, 
    "Hello World"
  ), 
  React.createElement(
    "p",
    null, 
    "I' Nordon"
  )
);

通过对比可以看到使用React.createElement代码结构嵌套会更为复杂，不仅阅读性较差，在编写过程中的开发体验也会比较糟糕

JSX 语法糖允许开发者使用我们最为熟悉的类 HTML 标签语法来创建虚拟 DOM，在降低学习成本的同时，也提升了研发效率与研发体验

为什么选择JSX？

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

在React中配合使用JSX，可以更好的更为友好的错误、警告信息，具备更高的安全性

React在渲染之前都会对内容进行处理，确保渲染的内容是开发者编写的内容，可以很好的防止XSS之类的攻击。比如会将&转译为amp;

常见的一些转译

< 转译为 &lt;
> 转译为 &gt;
" 转译为 &quot;
' 转译为 &#39;

JSX是JS的语法扩展，开发者可以在JSX中自由编写业务逻辑

function getInfo(person) {
  return `I'm ${person.name}, age is ${person.age}`;
}

const person = {
  name: 'Nordon',
  age: 18
};

const element = (
  <h1>
    Hello, {getInfo(person)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);