深入React技术栈：初入React世界

React简介

• 专注视图层
  没有用过react也应该有所耳闻react仅仅专注于view层，提供简洁的视图层解决方案。与模板引擎有一点不同的地方就是，react不仅专注解决view层的问题，它又是一个包括view和controller的库。

• 虚拟DOM（virtual Dom）
  在JS中，DOM将HTML解析为一个具有层次性的DOM树，在传统的开发模式中，操作DOM，更新视图，这些操作都是很耗费浏览器性能，因为性能耗费最大的就是操作DOM了。在React中，是把真实的DOM转换成JavaScript对象树，也就是所谓的虚拟DOM。

在每次数据改变后，react有一个diff算法，可以重写计算virtual dom（也就是JavaScript对象树），和上一次的virtual dom进行对比，然后对发生变化的部分进行批量更改。注意：对比DOM也是需要花费性能的。

• 函数式编程
  先说下什么叫做命令式编程，命令式编程是解决做什么的问题，就好像是下命令式的。函数式编程则对应的是声明式编程。react则是将不断声明，不断重复构建的ui抽象成组件，在特定的参数下渲染ui界面。

JSX语法

React为了方便view层组件化，承载了构建HTML结构化页面的职责。react主要是通过创建和更新虚拟元素来管理整个virtual DOM的。

虚拟元素，可以理解为真实元素的对应。其构建和更新都是在内存中完成。在react中创建的虚拟元素可以分为两类：

1. DOM元素 --- 对应元素DOM元素
2. 组件元素 --- 对应自定义元素

• DOM元素

我们使用JavaScript来描述页面中的DOM元素，这些元素可以简单的被描述为纯粹的JSON对象，如下：

   <button type="button" class="btn btn-default">
       <em>Confirm</em>
   </button>

其中包括了元素的类型和属性，如果转为JSON对象：

{
        type: 'button',
        props: {
            className: 'btn btn-default',
            children: {
                type: 'em',
                props: {
                    children: 'Confirm'
                }
            }
        }
    }
这样我们就可以在JavaScript中创建virtual DOM元素了。

• 组件元素
  我们可以将上面的button元素进行封装，得到一种构建按钮的公共方法：

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

我们可以换一种思维考虑，以上的Button方法其实也可以作为元素存在，方法名对应了元素类型，参数对应了DOM元素属性，所以这样构建的元素就是自定义类型元素或者是组件元素。
这也是react的核心思想之一，因为有公共的表达方法，我们可以让层层嵌套的元素封装成组件，然后用递归渲染的方式进行构建DOM树。

如下看更深层次的嵌套:

const DangerButton = (text) => ({
        type: Button,
        props: {
            color: 'red',
            children: text
        }
    })
    
    const DeletAccount = () => ({
        type: 'div',
        props: {
            children: [
                {
                    type: 'p',
                    props: {children: 'are you sure?'}
                },
                {
                    type: DangerButton,
                    props: {children: 'Confirm'}
                },
                {
                    type: Button,
                    props: {
                        color: 'red',
                        children: text
                    }
                }
            ]
        }
    })

以上我们可以看到实现的一个提示语和两个按钮的功能模块，可以见得这样的写法是很难以接受的，那么我们需要HTML的写法来提供支持，所以产生了JSX语法。

const DeletAccount = () => (
        <div>
            <p>are you sure?</p>
            <DangerButton>Confirm</DangerButton>
            <Button color='blue'>Cancle</Button>
        </div>
    )