深入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中创建的虚拟元素可以分为两类：
- DOM元素 --- 对应元素DOM元素
- 组件元素 --- 对应自定义元素
- 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>
)
