一、什么是JSX
JSX是JS的语法扩展，是一种将标记和逻辑共同存放在松散耦合单元（组件）中的编码方式（语法糖）。被用来声明React中的元素，描述用户界面。
JSX编译渲染过程
JSX被编译后，会转化为普通的JS函数调用。
对该函数取值，最终得到一个JS对象。
再通过React.render()函数渲染为DOM元素。
用原生JS或者jQuery写页面的时候，总是强调内容结构（HTML）、层叠样式（CSS）、逻辑行为（JS）三者分离，不要耦合。但说是不耦合，其实就是放在三种不同文件位置下管理。本质上并没有实现逻辑上的分离。JSX可以在react代码中直接混合使用js和html来编写代码，这是一种宏观上的代码封装，模块化处理。当然这也意味着，需要将jsx代码编译成普通的javascript代码，才能在浏览器中运行。
对于这种处理方式，有人说是倒退，有人说是语法糖。
其实两种方式各有各的好处，因为技术开发者的认知思路不同，所以技术的存在形式也非常多。作为一名学习者，既然你想学这套技能，那就需要理解设计者的设计思路，没有抗拒情绪，这样学起来才会事半功倍。
PS：ReactDOM.render( )
ReactDOM.render(element, container[, callback])
意为在container里渲染一个React元素，并返回对该组件的引用（或者针对无状态组件返回null）。
首次调用，容器节点里所有DOM元素都会被替换。后续调用，会使用DOM差分算法，高效部分更新。
如果提供了可选的callback回调参数，该回调将在组件被渲染或更新后执行。
二、JSX属性
- 在JSX语法中，可以通过引号，将属性值指定为字符串。
也可以通过大括号，在属性值中嵌入一个JS表达式。对于同一属性，不能同时使用这两种符号。
JSX语法支持使用json，但是需要使用两层大括号括起，外层表示内容为JS，内层是json本身的。
const element1 = <div tabIndex="0"></div>;
const element2 = <div src = {user.avatarUrl}></div>;
const element3 = <div style = {{'background':'red'}}></div>;
- 假如一个标签里没有内容，可以通过
/>来闭合标签，当然JSX标签也能包含很多子元素。
为了便于阅读，将JSX拆成多行，将内容包裹在括号中是建议写法，虽然不强制，但是这样可以避免自动插入分号陷阱。
const element = (
<div>
<h1>Hello</h1>
<h2>Good Luck</h2>
</div>
<img src={user.avatarUrl} />;
);
三、JSX表示对象
Bable会把JSX转译为一个名为React.createElement( )的函数调用。
以下两种实例代码完全等效：
const element = (
<h1 className="greeting">
Hello World!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello World!'
);
PS：React.createElement( )
React.createElement(
type,
[props],
[...children]
)
该方法创建并返回指定类型的新React元素。
其中类型参数既可以是标签名字符串（如'div'或'span'），也可以是React组件类型，还可以是React fragment类型。
每个JSX元素只是调用 React.createElement(component, props, ...children)的语法糖，React并不强制使用JSX，能用JSX实现的任何事情，用纯JS也可以同样实现
网友评论