React JSX

2020-04-13

React JSX

React使用JSX来代替常规的JavaScipt。
JSX是一个看起来很像XML的JavaScript语法扩展。
我们不需要一定使用JSX,但它有以下优点：

JSX执行更快，因为它在编译为JavaScript代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用JSX编写模板更加见到那快速。
我们先看下以下代码
1
const element = <h1>Hello,world!</h1>;
这种看起来可能有些奇怪的标签语法即不是字符串也不是HTML。
它被称为JSX,一种JavaScript的语法扩展，我们扩展在React中使用JSX来描述用户界面。
JSX是在JavaScript内部实现的
我们知道元素是构成React应用的最小单位，JSX就是用来声明React当中的元素。
与浏览器的DOM元素不同,React当中的元素事实上就是普通的对象，React DOM可以确保浏览器DOM的数据内容与React元素保持一致。
要将React元素渲染到根DOM节点中，我们通过把他们都传递给ReactDOM.render()的方法来将其渲染到页面上:
1
2
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement,document.getElementById('example'));
注意*
由于JSX就是javaScript,一些标识符就像class和for不建议作为xml属性名。作为替代，React DOM使用className和htmlFor来作对应的属性。

使用JSX

JSX看起来类似HTML，我们可以看下实例：

ReactDOM.render(
    <h1>Hello,World!</h1>,
    document.getElementById('example')
);

我们可以在以上代码中嵌套多个HTML标签，需要使用一个div元素包裹它，实例中的p元素添加了自定义属性data-myattribute,添加自定义属性需要使用data-前缀。

ReactDOM.render(
    <div>
    <h1>欢迎学习React</h1>
    <p data-myattribute = "somevalue">这是一个不错的JavaScript库！</p>
    </div>
    ,
    document.getElementById('example')
);

独立文件

你的React JSX代码可以放在一个单独的文件上，例如我们创建一个helloworld_react.js文件,代码如下:

ReactDOM.render(
    <h1>Hello,world!</h1>,
    document.getElementById('example')
);

然后再HTML文件中引入该JS文件:

<body>
    <div id="example"></div>
    <script type="text/babel" src="helloworld_react.js"></script>
</body>

JavaScript表达式

我们可以在JSX中使用JavaScript表达式。表达式写在花括号{}中。实例如下：

ReactDOM.render(
    <div>
        <h1>{1+1}</h1>
    </div>,
    document.getElementById('example')
);

在JSX中不能使用if else语句，但可以使用conditional(三元运算)表达式来代替，以下实例中如果变量i等于1浏览器将输出true,如果修改i的值，则会输出false

ReactDOM.reder(
    <div>
        <h1>{1 == ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);

样式

React推荐使用内联样式。我们可以使用camlCase语法来设置内联样式，React会在指定元素数字后自动添加px。以下实例演示了为h1元素添加myStule内联样式：

var myStyle = {
    fontSize: 100,
    color: '#FF000'
};
ReactDOM.render(
    <h1></h1>,
    document.getElementById('example)
);

注释

注释需要写在花括号内，实例如下：

ReactDOM.render(
    <div>
    <h1>React注释</1>
    {/*注释....*/}
    </div>
    document.getElementById('example')
);

数组

JSX允许在模板中插入数组，数组会自动展开所有成员：

var arr = [
    <h1>裴雷</h1>
    <h2>欢迎来到React的世界</h2>
];
ReactDOM.render(
    <div>{arr}</div>,
    document.getElementById('example')
);