react jsx是什么?

React 使用 JSX 来替代常规的 JavaScript。那么JSX是什么?下面本篇文章给大家介绍一下JSX。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

什么是JSX?

JSX即JavaScript XML,是一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖,也是react.js的使用基础。React在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此推荐使用JSX。

这个是官网:http://facebook.github.io/jsx/

使用JSX的好处

1、更加熟悉

许多团队都包括了非开发人员,例如熟悉HTML的UI及UX设计师和负责完整测试产品的质量保证人员。使用JSX之后,这些团队成员都可以更轻松地阅读和贡献代码。任何熟悉XML语言的人都能轻松地掌握JSX.

2、更加语义化

除了更加熟悉外,JSX还能够讲JavaScript代码转换为更加语义化、更加有意义的标签。

<div className="divider">
    <h2>Question</h2>
</div>

变成

<Divider>Question</Divider>

3、更加直观

对比使用JS和JSX

//使用JS
render:function (){
  return React.createElement('div', {className: "divider"},
    "Label Text",
    React.createElement('hr')
  );
}
//使用JSX
render:function (){
  return <div className="divider">
      Labbel Text<hr/>
  </div>
}

很多人都认为JSX版本更加易懂,也更容易调试。

4、抽象化

上面的js写法可能会因为React的版本不同而不同。但是JSX提供的抽象能力却能够在升级的时候无痛修改。不需要修改任何代码

5、关注点分离

最后,也是React的核心。有HTML和JS代码在一起组成一个独立的组件,并把所有的逻辑和标签封装在其中。所以你只需要关注每一个独立的组件。JSX以干净且简洁的方式保证了组件中的标签和所有业务逻辑的相互分离。它不仅提供了一个清晰、直观的方式来描述组件树,同时还让你的应用程序更加符合逻辑。

更多React相关技术文章,请访问 React答疑 栏目进行学习!

以上就是react jsx是什么?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读