深入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注释类似，唯一不同的是，当为组件的子元素添加注释时，最外层需要加一个{}，例如：

const 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 编码查询编码 

 3.使用数组组装{['cc ', ©, ' 2015']} 

 4.直接插入原始的 HTML。