React学习 -- JSX

React为了方便组件化，需要构建HTML结构化页面。那么React是如何操作的呢？答案是，React通过创建与更新虚拟元素来管理整个虚拟DOM。

虚拟DOM是什么：由于DOM操作开销比较大，并且频繁的操作DOM会使得代码难以维护，React将DOM树转化成了JavaScript对象树，也就是虚拟DOM（Virtual DOM）。
每次数据更新后，React会先重新计算虚拟DOM，并和上次生成的虚拟DOM做对比，仅仅对发生变化的部分做批量更新（批量更新的性能要远好于一次一次单独的更新）。

虚拟元素是什么：虚拟元素就是真实元素的映射，但是它们的创建和更新都是在内存中完成的，不会真正的去渲染浏览器DOM树。虚拟元素可以分为两类：DOM元素和组件元素，分别对应的是：原生的DOM和用户自定义元素（比如说我们可以自己定义：< myDiv >）。

虚拟元素之–DOM元素：

当我们使用JavaScript来描述HTML元素的时候，这些元素可以被抽象为一个JSON对象（也就是Node节点），例如，一个按钮：

<button class="btn btn-blue">     <em>Confirm</em></button>

如果转换为JSON对象：

{    type: 'button',     props: {        className: 'btn btn-blue',         children: [{            type: 'em',             props: {                children: 'Confirm'             }        }]     }}

这样，我们就可以根据这段代码，在JS中创建的虚拟DOM元素，最后再将虚拟DOM转化为浏览器上真正的DOM。

虚拟元素之 – 组件元素（用户自定义元素）

对于上述的button元素，我们可以很容易地进行封装成某个个性化的按钮：

const ColorButton = ({ color, text }) => {     return {         type: 'button',         props: {            className: `btn btn-${color}`,             children: {                type: 'em',                 props: {                    children: text,                },             },         },    }; }

然后，在需要生成按钮的时候，直接调用 ColorButton({color:'blue', text:'Confirm'}) 就可以创建。

现在我们发现，button：一个JSON对象，ColorButton({color:'blue', text:'Confirm'}) 也返回一个JSON对象，那么，MyButton()其实和button的地位是一样的，它也可以作为元素而存在。
进一步的，我们就可以有这样的写法：

{    type: ColorButton,     props: {        color: 'blue', 2        children: 'Confirm'     }}

‘这也是React的核心思想之一。因为有公共的表达方法，我们就可以让元素彼此嵌套或混合。’

元素层层嵌套、封装，形成了React组件，最终，我们可以采用递归的方式构建出一个完全的DOM元素树。

于是，我们还可以将ColorButton继续封装：

const DangerButton = ({ text }) => ({     type: Button,    props: {         color: 'red', 4        children: text     }});

然后所有这些都可以作为某个新元素的子节点：

const DeleteAccount = () => ({     type: 'div',    props: {        children: [            {                   type: 'p',                 props: {                children: 'Are you sure?',                 }            },             {                type: DangerButton,                 props: {                    children: 'Confirm',                 },            }, {                type: Button,                 props: {                    color: 'blue',                    children: 'Cancel',                 },            }],         }});

我们已经可以看出，这个仅嵌套了两层的虚拟元素已经有点复杂了。。。

于是，JSX语法为我们解决了这个问题：

const DeleteAccount = () => (      <div>        <p>Are you sure?</p>         <DangerButton>Confirm</DangerButton>          <Button color="blue">Cancel</Button>    </div> );

JSX将HTML和JS结合在一起，再通过编译器转化为纯JS后由浏览器执行。

基本语法：

元素类型：DOM元素首字母小写，组件元素首字母大写。

元素属性：

在JSX的虚拟元素中，DOM元素和组件元素都有属性。但是需要注意，DOM元素的属性：class／for是JS关键词，因此React做了如下转换：

class -> className for -> htmlFor 

组件元素的属性则都是完全自定义的属性。

// defineconst Header = ({title, children}) => (     <h3 title={title}>{children}</h3>);// usage<Header title="hello world">Hello world</Header>

属性表达式：
如果属性的值需要表达式来计算，只要用大括号替换双引号即可：

const person = <Person name={window.isLoggedIn ? window.name : ''} />;

因为JSX解析的方法是，遇到<…就按照HTML解析，遇到{}，就按照JS解析。