JSX语法糖

最新推荐文章于 2024-06-29 15:48:07 发布

原创最新推荐文章于 2024-06-29 15:48:07 发布 · 801 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #jsx

javascript 专栏收录该内容

14 篇文章

订阅专栏

语法糖：语法糖(Syntactic sugar),是由Peter J. Landin(和图灵一样的天才人物，是他最先发现了Lambda演算，由此而创立了函数式编程)创造的一个词语，它意指那些没有给计算机语言添加新功能，而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式，有益于更好的编码风格，更易读。不过其并没有给语言添加什么新东西。

JSX语法糖

JSX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，React 官方推荐使用JSX，当然你想直接使用纯Javascript代码写也是可以的，只是使用JSX，组件的结构和组件之间的关系看上去更加清晰。

JSX语法简介

React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。

一. 三元表达式

var person = <Person name={window.isLoggedIn ? window.name : ''} />;
上述代码经过JSX编译后会得到：

var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

二. 数组递归

数组循环,数组的每个元素都返回一个React组件。

var lis = this.todoList.todos.map(function (todo) {
  return  (
    <li>
      <input type="checkbox" checked={todo.done}>
      <span className={'done-' + todo.done}>{todo.text}</span>
    </li>
  );
});

var ul = (
  <ul className="unstyled">
    {lis}
  </ul>
);

三. 使用样式

<div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div>
或者
var style = {
  color: '#ff0000',
  fontSize: '14px'
};

var node = <div style={style}>HelloWorld.</div>;

四.绑定事件

JSX让事件直接绑定在元素上。

<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>
和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称，大括号中仍然是标准的JavaScript表达式，返回一个事件处理函数。

React并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点document上为每种事件添加唯一的Listener，然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件，React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。尽管整个事件系统由React管理，但是其API和使用方法与原生事件一致。

JSX注意事项

1.开发依赖
jsx语法依赖react.js和jsx的解析器。所以在它之前必须还引入这两种基础文件。
react.js 、react-dom.js 和 browser.min.js ，它们必须首先加载。
2.script标签声明
script 标签的 type 属性为 text/babel，这是React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是在页面中直接使用 JSX 的地方，都要加上 type=”text/babel”。