菜单 学习猿地 - LMONKEY

 react jsx是什么?

react jsx是什么?

Greenday profile image Greenday ・1 min read

什么是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以干净且简洁的方式保证了组件中的标签和所有业务逻辑的相互分离。它不仅提供了一个清晰、直观的方式来描述组件树,同时还让你的应用程序更加符合逻辑。

评论 (0)