react.js 从零开始，三JSX 语法及特点介绍

2023-12-01 09:53•html•阅读 4823

什么是jsx？

jsx = JavaScript + xml

jsx 是一种 Ecmascript 的一种新标准。

jsx 是一种带有结构性的语法。

jsx 的特点：

1.类xml语法易于理解。

2.增强js语意。

3.结构清晰。

4.抽象程度高，易于跨平台。

5.代码模块化。

如何使用jsx？

var red"}; 
var HolleWorld = React.createClass({

        render: function() {
          return <p style={style}>holle world {this.props.name}

　　　　　　　　　　{
/*这里是多行注释*/
//这里是单行注释


}　　
</p>;
        }
      });
        React.render(
          <HolleWorld  name="sdsd" />,
          container
        );

上面是一段jsx的语法、我们在使用的时候要注意一下几点。

1. HolleWorld 是元素名首字母必须大写。 jsx 会把首字母小写的标签当做默认的html 标签进行解析。

2. 嵌套通过 {this.props.name} ，可以向jsx组件里面添加一个文本节点。

3. 注释注释可以引用js默认的注释方式不过要通过大括号括起来。

4. 在jsx中使用样式， jsx把样式做了处理可以通过直接传入对象的方式进行样式添加。

5. jsx内部可以使用js各种表达式，函数，运算等。。

jsx非dom属性？

除了与 DOM 的差异之外，React 也提供了一些 DOM 里面不存在的属性。

key：可选的唯一的标识器。当组件在渲染过程中被各种打乱的时候，由于差异检测逻辑，可能会被销毁后重新创建。给组件绑定一个 key，可以持续确保组件还存在 DOM 中。
ref：父组件引用子组件。
dangerouslySetInnerHTML：提供插入纯 HTML 字符串的功能，主要为了能和生成 DOM 字符串的库整合。

总结：

关于jsx 简易理解和使用方法就介绍到这里了。。如果大家对这个有兴趣可以阅读jsx解析器源码。。

大家下期再见哦。