React简介 - 好文

React简介
1、react发展－－－facebook在构建instagram网站的时候遇见两个问题
a、数据绑定的时候，大量操作真实dom，性能成本太高
b、网站的数据流向太混乱，不好控制

2.React 把用户界面抽象成一个个组件，如按钮组件 Button、对话框组件 Dialog、日期组件
Calendar。开发者通过组合这些组件，最终得到功能丰富、可交互的页面。通过引入 JSX
语法，复用组件变得非常容易，同时也能保证组件结构清晰。有了组件这层抽象，React 把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到 DOM
来开发网页外，还能用于开发原生移动应用

react特点

1.声明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）。
2.高效 −React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

React的核心是组件，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。
React的精髓是函数式编程
提高代码复用率：组件将数据和逻辑封装，类似面向对象中的类。
降低测试难度：组件高内聚低耦合，很容易对单个组件进行测试。
降低代码复杂度：直观的语法可以极大提高可读性。

使用典型代表公司

国外使用React的公司：Facebook，Flipboard，Airbnb，BBC，GitHub，Instagram，Reddit，Uber，WhatsApp，Yahoo

国内使用React的公司：支付宝，淘宝，大搜车，Teambition，豆瓣，豌豆荚

React 并不是完整的 MVC/MVVM 框架，它专注于提供清晰、简洁的 View（视图）层解决方案。而又与模板引擎不同，React 不仅专注于解决
View 层的问题，又是一个包括 View 和 Controller 的库。

React 不像其他框架那样提供了许多复杂的概念与烦琐的 API，它以 Minimal API Interface 为目标，只提供组件化相关的非常少量的
API。同时为了保持灵活性，它没有自创一套规则，而是尽可能地让用户使用原生 JavaScript 进行开发。只要熟悉原生 JavaScript
并了解重要概念后，就可以很容易上手 React 应用开发。

传统dom更新
真实页面对应一个 DOM 树。在传统页面的开发模式中，每次需要更新页面时，都要手动操作 DOM 来进行更新

虚拟dom：
DOM 操作非常昂贵。我们都知道在前端开发中，性能消耗最大的就是 DOM 操作，而且这部分代码会让整体项目的代码变得难以维护。React 把真实 DOM
树转换成 JavaScript 对象树，也就是Virtual DOM

函数式编程

英文Functional Programming
它属于”结构化编程”的一种，主要思想是把运算过程尽量写成一系列嵌套的函数调用。

函数式编程好处：
代码简洁，开发快速接近自然语言，易于理解更方便的代码管理易于"并发编程“ 代码的热升级
函数式编程才是 React 的精髓。
工业界的编程方式一直以命令式编程为主。命令式编程解决的是做什么的问题。

JSX语法的由来

React 为方便 View 层组件化，承载了构建 HTML 结构化页面的职责。从这点上来看，React 与其他 JavaScript
模板语言有着许多异曲同工之处，但不同之处在于 React 是通过创建与更新虚拟元素（virtual element）来管理整个 Virtual DOM 的。

JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。在实际开发中，JSX
在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。

编译过程由Babel 的 JSX 编译器实现。

JSX 的官方定义是类 XML 语法的 ECMAScript 扩展。它完美地利用了 JavaScript 自带的语法和特性，并使用大家熟悉的 HTML
语法来创建虚拟元素。

组件是一个集合体，就是把html，js，css放在一起形成一个组件，组件的写法就是jsx语法编写

创建react的一个组件
1、下载react lib文件 2、导入各个文件 3、创建组件 createClass 4、渲染 render
1 . XML 基本语法

定义标签时，只允许被一个标签包裹。
标签一定要闭合。

2 . 元素类型
小写首字母对应 DOM 元素
大写首字母对应组件元素

3、react中如何去写css
1、基于class --（className） 2、基于inner css （facebook 主张的方式）行间样式(json) 3、原型链和全局变量
4、react中事件机制
react自定义了一套符合w3c标准的事件机制 eg：点击： onClick 触摸结束： onTouchEnd
5. HTML 转义
React 会将所有要显示到 DOM 的字符串转义，防止 XSS。
后台传过来的数据带页面标签的是不能直接转义的，具体转义的写法如下：

通过dangerouslySetInnerHTML={{__html:转译dom}}来实现
eg： var content='<strong>content</strong>'; React.render( <div
dangerouslySetInnerHTML={{__html: content}}></div>, document.body );
补充内容：

使用步骤
1、react.creatClass()创建组件
2、要去实现组件中render方法
3、在render方法中通过return返回jsx生成页面中的html内容

注意：1、组件命名，首字母大写
2、render方法 ReactDOM.render(<组件/>,node节点)

react中写入css

1、base class—需要将react写class–用className代替class

2、每个组件都具有自己的属性和功能 inner css reactjs 行内
样式均是以json形式存在{color：’red’},react将变量嵌套jsx中，style={变量名称}

3、基于全局变量也就是将css抽取变成全局变量或者在组件原型链上面进行挂载

事件机制

（函数声明需要与render同级
，因为在react.creatClass传入的是对象，声明的函数也是其中的一个对象，是react对象对外暴漏的原型链,render会计算return的方法，同样计算同级的方法）

1、直接写事件机制onClick={this.函数名}

2、将所有函数变量封装到全局变量中

3、原型链写法

在jsx中写逻辑 –要写在render和return之间

注释标签的方法{/标签/}

组件嵌套不能多个节点渲染，否则最后一个组件覆盖前面的

热门工具换一换