JSX简介

JSX（Javascript and XML）：React家伙发明的，是一种可以在JS中编写XML的语言。JSX更像是一种模板，类似Vue中的template。

JSX其实就是JS的语法糖，编译时，JSX会通过Babel编译成JS。

JSX语法使用

{xxx}：大括号里就是JS的变量或者表达式，可实现一切动态的功能，包含判断与循环；
onXxx：DOM事件的写法。

JSX语法与Vue Template的语法区别

Vue Template有很多自定义的规则语法，例如：

:xxx 动态属性
@xxx 事件
:class和:style等写法
v-if、v-for等指令
v-model、slot等使用

这些自定义规则都需要学习和了解。JSX会相对简洁，组件事件、属性等，都作为JS函数的参数处理，即{xxx}传参。

JSX表达式

表达式写在花括号 {} 中；
在JSX中不能使用if else语句，可使用三元运算表达式来替代。

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

JSX属性

<p id="p1" title={title}>hello vue</p>

<p onClick={addTodoHandler}>todo input</p>

JSX使用样式

JSX中使用小驼峰命名来定义属性名称，因此class变成了className（React就是JS代码，class是JS中的关键字）。

const name = 'LeaT';
const style = {
  fontSize: 100,
  color: '#FF0000'
}
const element = <h1 style={ style }>Hello, { name }</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

React推荐使用内联样式，且会在指定元素的数字后自动添加px。

var myStyle = {
    fontSize: 100, //100px
    color: '#FF0000'
};
ReactDOM.render(
    <div>
        {/*注释要卸载括号中哦...*/}
        <h1 style = {myStyle}>菜鸟教程</h1>
    </div>,
    document.getElementById('example')
);

JSX注释

JSX中注释卸载{/注释.../}中

ReactDOM.render(
  <div>
    <h1>Hello World!</h1>
    {/*注释...*/}
  </div>,
  document.getElementById('root')
);

JSX数组

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

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

状态和响应式

React就是一个useState API，使用setXxx方法定义数据。由于React修改数据是非响应式，所以要实现响应式，也需要通过setXxx来显式的修改，即命令式修改操作。

React的useState能定义并修改任何数据类型。

10分钟快速掌握React中的JSX