深入react技术栈--（1）简单了解

虽然已经使用react进行项目编写已经大半年了，可是并没有时间来系统的整理一下相关的知识，到年底了，跟随《深入react技术栈》完整的整理一遍知识和原理，也算方便自己日后回顾啦

1.react View层Js框架

不同于其他 MVC（Model-View-Controller）或 MVVM（Model-View-ViewModel）等框架，react 是一个专注视图层（View层）的框架，专注的中心是Component（组件）。但是复杂的业务处理和数据则可以搭配Flux、Redux等来处理。

2.react Virtual DOM（虚拟DOM）

大家都在说真实DOM 操作会严重的影响性能，可是无论是真实DOM 还是虚拟DOM 都是对DOM的操作，那为什么说虚拟DOM性能更好呢，其实简单的对于操作机制来判断即可明白。真实DOM总损耗=真实DOM完全修改+所有参与修改节点的排版/重绘虚拟DOM总消耗=虚拟DOM增删改（与之前DOM做比较）+具有差异的DOM进行增删改+部分差异节点的排版/重绘

不过这个还不能够明显的说明虚拟DOM损耗小于真实DOM，因为咋计算差异的过程种也是有时间损耗的，所以说不一定所有类型的页面都适合react框架，在拥有大量的DOM操作和大量的复用性区块的时候，利用react组件来完成不失为一个好办法。

2.react JSX语法

简单的来说，JSX语法就是在原本的js文件中可以写入HTML标签。 JSX 的官方定义是类 XML 语法的 ECMAScript 扩展。

XML语法基础：（此两点必须作为项目书写规范之一）

1.定义标签时，只允许被一个标签包裹。（最外层必须有一个大的标签包裹内容）

2.标签必须闭合

元素类型：（此两点必须作为项目书写规范之一）

1.DOM元素（标签的开头用小写）

2.组件元素（标签的开头字母必须用大写）

注释：（注释快捷键：Ctrl + /）

如一般js注释类似，唯一不同的是，当为组件的子元素添加注释时，最外层需要加一个{}，例如：

c onst App = (

<Nav>

{/*节点注释*/}

<Person

/*多行注释*/

name={window.isLoggedIn ? window.name : ''}/>

<Nav/>

)

元素属性：

在JSX中，不论是DOM元素还是组件元素，他们都有属性

1 .不同的是，DOM元素属性是标准规范属性，但由于class和for不仅是标签关键词也是属性关键词。所以在此修改如下:

class 属性改为className

for 属性改为htmlFor

2.组件的元素可完全自定义，例如组件的名称一样。

3.boolean属性，即 true 和 false，多用于表单验证，例如 disabled、required、checked和readOnly等属性

不指定值是默认为true。

例如：<checkbox checked={true} /> 其中 checked =｛true｝可省略

<Checkbox checked={false} />其中 checked属性可直接省略

自定义属性：

在JSX中添加自定义属性要注意区分：

1. 要使用HTML标签中的自定义属性时，要使用data-前缀，eg：<div data-xxx=''></div>

2.在自定义标签中任意属性都是被支持的，eg：<div xxx=''></div>

3.以aria-开头的网络无障碍属性同样可以正常使用，eg：<div aria-hidden={true}></div>

展开属性：

在react 的组件中如果props不确定个数，可以利用ES6 的 rest/spread 的特性来写：

例如：

const data={name:'foo',value:'bar'};

const component=<Component name{data.name} value={data.value} /> 可以写成：

const data = {name:'foo',value:'bar'}；

const component = <Cpmpoent {...data} />

Javascript属性表达式：

属性值要使用表达式，只要用{}替换""即可。Html转义：（react会将所有要显示到DOM的字符串转义，防止XSS=跨站脚本攻击）

如果JSX中含有转移后的实体字符，比如版权符号的特殊字符。

解决办法：

1.直接使用UTF-8字符

2.使用对应字符的 Unicode 编码查询编码

4. 直接插入原始的 HTML。