JSX语法及学习

--> -->

• 文章目录

  • 对比
  • 为什么使用 JSX

• • 文章目录

  • 对比

  • 为什么使用 JSX

• JSX 是 Javascript 代码里直接写XML的语法

• JSX (Javascript XML syntax transform) 是使用XML语法编写Javascript的一套解析工具；
  X代表XML；也可以理解为扩展(eXtension)，因为实现JSX功能本身就是使用Javascript；
  React建议使用JSX（但非必要）

• 实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码

React 官方推荐使用JSX， 当然你想直接使用纯Javascript代码写也是可以的，只是使用JSX，组件的结构和组件之间的关系看上去更加清晰

• 使用 JSX

• React.render(
    <div>
        <div>
            <div>content</div>
        </div>
    </div>,
    document.getElementById('example')
  

  );

• 不使用JSX

• React.render(
    React.createElement('div', null,
        React.createElement('div', null,
            React.createElement('div', null, 'content')
        )
    ),
    document.getElementById('example')
  

  );

对比

// 使用JSX

var Nav;
var app = <Nav color="blue" />

// 使用原生Javascript

var Nav;
var app = createElement(Nav, { color: "blue" });

我们写一个XML标签，实质上就是在调用React.createElement这个方法，并返回一个ReactElement对象

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

这个方法的第一个参数可以是一个字符串，表示是一个HTML标准内的元素，或者是一个ReactClass类型的对象，表示我们之前封装好的自定义组件。第二个参数是一个对象，或者说是字典也可以，它保存了这个元素的所有固有属性（即传入后基本不会改变的值）。从第三个参数开始，之后的参数都被认作是元素的子元素。

为什么使用 JSX

方便DOM节点可视化 - 以往需要createElement \ append才能把一个DOM节点插入到文档中显示，使用JSX的代码就是 React，跟普通的HTML代码一样（规范的HTML文档本身就是XML文档）

方便创建变更DOM节点属性和内容；

方便MXML和XAML的开发人员 - 因为他们已经使用过类似的语法；