react中的jsx学习记录一、JSX本质：不是模板引擎，而是语法糖 jsx常见写法: 其中，const ele = <

一、JSX本质：不是模板引擎，而是语法糖

jsx常见写法:

<script type="text/babel">
  const ele = <h2>Hello React!</h2>
  ReactDOM.render(ele, document.getElementById("app"));
</script>

其中，const ele = <h2>Hello React!</h2>的写法解析后的结果为：

const ele = React.createElement('h2', null, 'Hello React!');

react通过babel把JSX转成createElement函数，生成ReactElement对象，然后通过ReactDOM.render函数把ReactElement渲染成真实的DOM元素

二、如何使用JSX

1、自定义组件以大写字母开头，react认为小写的tag都是原生DOM节点，比如：div
2、大写开头为自定义组件
3、jsx标记可以直接使用属性语法，例如：<menu.Item />
4、jsx本身也是表达式： const ele = <h1>hello, world!</h1>
5、在属性中使用表达式：<MyComponent foo={1 + 2 + 3} />
6、延展属性：

const props = {firstName: 'aaa', lastName: 'bbbb'};
const ele = <MyComponent {...props} />;

7、表达式作为子元素： const ele = <div>{props.age}</div>
8、在jsx中使用样式类名，需用className，如：<div className="title">{prop.name}</div>

三、jsx的优点

1、声明式创建界面的直观
2、代码动态创建界面的灵活
3、无需学习新的模板语言