react的前世今生之路（一）

react官方介绍特性

声明式、组件化、一次学习，随处编写

这里就不介绍如何安装使用react了。我们先来了解react中的jsx语法。

一.什么是jsx语法

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

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。
当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

如下(JS写法)
   var child1 = React.createElement('li', null, 'First Text Content');
   var child2 = React.createElement('li', null, 'Second Text Content');
   var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
等价于(JSX写法)
   var root =(
     <ul className="my-list">
     <li>First Text Content</li>
     <li>Second Text Content</li>
     </ul>
   );

后者将XML语法直接加入JS中,通过代码而非模板来高效的定义界面。之后JSX通过翻译器转换为纯JS再由浏览器执行。

二.jsx的基本用法

表达式

由于jsx的大括号内是javascript,所以只能添加表达式（包括三元运算符），如果填写引号包括的内容，会默认转成字符串。
```
ReactDOM.render(
<div>
  <h1>{1+1}</h1>
  <h2>{i == 1 ? 'True!' : 'False'}</h2>
</div>,
document.getElementById('example')
);
```

样式

React 推荐使用内联样式，我们可以使用 camelCase 语法来设置内联样式。

var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

注释

注释在jsx中编写比较特殊，需要包含在大括号中。

ReactDOM.render(
<div>
    <h1>菜鸟教程</h1>
    {/*注释...*/}
</div>,
document.getElementById('example')
);

数组 jsx中如果想要渲染一个列表数据，不是通过像vue那种for方式，而是要使用数组的一些方法（map），进行循环渲染。同时，JSX 允许在模板中插入数组，数组会自动展开所有成员。

var arr = [
  <h1>菜鸟教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>
    {arr}
    <ul>
    {arr.map(item => {
        return <li>{item}</li>;
    })}
    </ul>
  </div>,
  document.getElementById('example')
);

三.jsx带来的好处

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

四.结尾

以上就是react核心之一jsx语法的介绍，通过这个jsx语法我们可以更好，更快的编写我们的代码。希望有机会与大家分享~ 如果你有更多react的有趣东西，欢迎在评论区留言哦~

文章推荐：react的前世今生之路（二）

作者：小怂

我与前端技术结下的不解之缘系列（一）

react的前世今生之路（一）

一.什么是jsx语法

二.jsx的基本用法

三.jsx带来的好处

四.结尾