上一篇文章讲了一下他的儿子vue，作为vue的爹，react有什么牛逼的地方吗？当然有。他的诞生是facebook为了处理开发ins中出现的问题，起初调研过市场上已存的mvc框架，发现都不太满意，于是就推陈出新，开发了react框架，并在2013年五月份开源。

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

       

特点：

1.声明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）。

2.高效 −React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互。

3.灵活 −React可以与已知的库或框架很好地配合。

4.JSX − JSX 是 JavaScript 语法的扩展。

5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

 

React的核心是组件，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。

提高代码复用率：组件将数据和逻辑封装，类似面向对象中的类。

降低测试难度：组件高内聚低耦合，很容易对单个组件进行测试。

降低代码复杂度：直观的语法可以极大提高可读性。

 

使用典型代表公司：

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

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

react是一个专注于视图层的框架。

现在的应用已经变得前所未有的复杂，因而开发工具也必须变得越来越强大。React 并不是完整的 MVC/MVVM 框架，它专注于提供清晰、简洁的 View（视图）层解决方案。而又与模板引擎不同，React 不仅专注于解决 View 层的问题，又是一个包括 View 和 Controller 的库。对于复杂的应用，可以根据应用场景自行选择业务层框架，并根据需要搭配 Flux、Redux、GraphQL/Relay 来使用。

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

传统dom更新：

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

虚拟dom：

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

 函数化编程：（这是react的精髓）        

         英文Functional Programming

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

函数式编程好处：

          1.代码简洁，开发快速

          2.接近自然语言，易于理解

          3.更方便的代码管理

          4.易于"并发编程“

          5.代码的热升级

JSX语法的由来

        React 把过去不断重复构建 UI 的过程抽象成了组件，且在给定参数的情况下约定渲染对应的 UI 界面。React 能充分利用很多函数式方法去减少冗余代码。此外，由于它本身就是简单函数，所以易于测试。可以说，函数式编程才是 React 的精髓

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

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

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

         组件是一个集合体，就是把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        更多事件机制可以参考官方api

5. HTML 转义

       React 会将所有要显示到 DOM 的字符串转义，防止 XSS。

       后台传过来的数据带页面标签的是不能直接转义的，具体转义的写法如下：

       var content='<strong>content</strong>';  

 

      React.render(

             <div dangerouslySetInnerHTML={{__html: content}}></div>,

               document.body

);

补充一些内容：

5. HTML 转义

React 会将所有要显示到 DOM 的字符串转义，防止 XSS。

后台传过来的数据带页面标签的是不能直接转义的，具体转义的写法如下：

var content='<strong>content</strong>';  

 

React.render(

    <div dangerouslySetInnerHTML={{__html: content}}></div>,

    document.body

);

React webpack的写法

所有组件都写在一个js文件里面  不好维护  写多个js去引入也无法识别

  2、通过browser.js讲jsx转换成js 性能慢

      如何解决      借助前段构建工具webpack 

      1、webpack是facebook为react量身打造的构建工具

      2、主要作用是实现模块化，代码整合，代码分割的作用

      3、使用webpack整合以后  也不需要使用browser进行将jsx转成js了

3、也就是使用webpack实现模块化---什么是模块化

      1、模块指的是一组具有同等属性和功能的集合叫做模块和类的概念相似

      2、react模块化指的是一个js中存放一个或多个组件，这些组件通过commonjs规范对外提供接口

      3、在其他组件当中可以调用这些对外提供成接口的组件

如何使用webpack

      1、全局安装 webpack

      2、项目中安装依赖 webpack –D

      3、安装webpack支持react的核心工具jsx-loader

      4、安装react  react-dom 依赖(2017.9.27最新版本  弃用createClass)

      5、安装npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

  6、配置文件  打包输

 loaders: [{test: /\.js$/,

      exclude: /(node_modules|bower_components)/,

      loader: 'babel-loader',

      query: { presets: ['es2015', 'react']}}]

    React ES6的写法

 

1.Nodejs模块的引入

          // ES5写法

                var React = require('react');

        // ES6写法

                import React from 'react';

2. 组件的声明

         // ES5写法

                React.createClass

         // ES6写法

                 class TodoList extends React.Component

       

 react的属性，状态，数据流，生命周期，虚拟dom和diff算法，数据加载，动画

属性和状态是react中数据传递的载体

     组件接收属性值的传递：

     this.props.属性名

例如：

<Header title="留言" />

var Header = React.createClass({

  render: function() {

    return (<h2>{this.props.title}</h2>);

  }

});

2、属性传递的方式

      1、key-value形式

       2、展开式传入

       3、内部声明getDefaultProps 

       4、es6    使用  组件. defaultProps  ---  构造器（this.props.xxx）  

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

重要的方法：

getInitialState ：定义初始状态   /es6   在constructor   中 通过this .state={} 设置

this.state ：读取状态

this.setState：更新组件的状态      ／es6中  在事件中调用需要在构造器中  通过bind绑定this

数据流

  1、数据从父组件流向子组件

  2、子组件数据流向父组件

操作dom

  ref获取dom元素  ref给dom添加该属性

  通过this.refs.ref的值获取dom

React生命周期

生命周期整体流程：

react组件经历总体阶段

  1、mounted阶段  加载阶段  或者说初始化阶段  这个阶段组件由jsx转换成真实dom

  2、update阶段 组件运行中阶段 或者更新阶段  当组件修改自身状态，（setState）或者父组件修改子组件属性的时候发生的阶段

  3、umount阶段  组件卸载阶段  这个一般是组件被浏览器回收的阶段

 

 

1.实例化

getDefaultProps   取得默认属性

getInitialState   初始化状态

低版本是五个函数都有，高版本只有后三个

componentWillMount  即将进入dom

render   描画dom

componentDidMount  已经进入dom  

2、具体的声明函数周期---运行中阶段  数据更新过程

运行中阶段只有在父组件修改了子组件的属性或者说一个组件修改自身的状态才会发生的情况

         1、组件将要接受新值componentWillReceiveProps（已加载组件收到新的参数时调用）

         2、组件是否更新 shouldComponentUpdate  （影响整个项目的性能，决定视图的更新）

         3、组件即将更新 componentWillUpdate

         4、必不可少的render

         5、组件更新完毕时运行的函数 componentDidUpdate

3、销毁时 componentWillUnmount

卸载组件

ReactDOM.unmountComponentAtNode(‘节点’)

react还有一个区别于别的框架，作为其一个独特的特色的部分，就是他的算法

虚拟dom与diff算法

        Web界面由DOM树来构成，当其中某一部分发生变化时，其实就是对应的某个DOM节点发生了变化。在React中，构建UI界面的思路是由当前状态决定界面。前后两个状态就对应两套界面，然后由React来比较两个界面的区别，这就需要对DOM树进行Diff算法分析。     

一： 

diff算法：传统：找到两棵任意的树之间最小的修改是一个复杂度为 O(n^3) 的问题. 因为需要不同的层级。

Facebook算法：

React 用了一种简单但是强大的技巧, 达到了接近 O(n) 的复杂度.

把树按照层级分解

二：

Facebook算法：

列表比较，写一个 key 属性帮助 React 来处理它们之间的对应关系.
实际中, 在子元素中找到唯一的 key 通常很容易.

三：

Facebook算法：

Components比较，React app 通常由用户定义的 component 组合而成,
通常结果是一个主要是很多 div 组成的树.
这个信息也被 React 的 diff 算法考虑进去, React 只会匹配相同类型(ES6 class)的 component.

只能修改相同类型的组件

四：

Facebook算法：

合并操作，当调用 component 的 setState 方法的时候, React 将其标记为 dirty.
到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.

五：

Facebook算法：

选择性子树渲染，在组件上实现下面的方法

boolean shouldComponentUpdate(object nextProps, object nextState)

根据 component 的前一个和下一个 props/state,
你可以告诉 React 这个 component 没有更新, 也不需要重新绘制.
实现得好的话, 可以带来巨大的性能提升.

数据加载

1、数据绑定的第一种方式：基于jsx绑定

          1、在componentWillMount/componentDidMount 中获取ajax数据  ( 面试题)

          2、将得到的数据存入state中

          3、在render中直接将state中的数据循环遍历  放在一个jsx的数据模板中

          4、循环叠加这个jsx模板   通过{}嵌入到页面中

2、mixins函数(es6 弃用)

  1、作用是可以将一些公共的方法写在一个object的方法里面

  2、然后通过mixins在组件中声明这个对象的表达式

  3、在jsx中 就可以使用this去调用object里面的各个方法

这样实现了react多个组件之间共享一些公共的方法

动画

css3动画

  关键帧动画 animation @keyframes

  过渡动画 transition

javascript动画

ReactTransition：React官方提供的动画解决方案。

官方文档：

https://facebook.github.io/react/docs/animation.html

  各种库的动画方法，例如：JQ的animate方法

 

ReactTransition使用方法：

 

1.引入组件

import ReactCSSTransitionGroup from 'react-addons-css-transition-group‘

 

2. 使用ReactCSSTransitionGroup标签包裹动画标签

<ReactCSSTransitionGroup

  transitionName="example"

  transitionEnterTimeout={500}

  transitionLeaveTimeout={300}>

  {items}

</ReactCSSTransitionGroup>

注意：生成{items}的时候，里面每一个元素必须包含key属性。因为react要判断哪个元素进入，停留，移除

     

ReactTransition使用方法：

 

3.  写动画用的css(黄色的字是上一页中的transitionName)

.example-enter   进入动画的起点

.example-enter-active   进入动画的终点

 

.example-leave   离开动画的起点

.example-leave-active  离开动画的终点

 

ReactTransition使用方法：

定制动画的class

<ReactCSSTransitionGroup

  transitionName={ {

    enter: 'enter',

    enterActive: 'enterActive',

    leave: 'leave',

    leaveActive: 'leaveActive',

    appear: 'appear',

    appearActive: 'appearActive'

  } }>

  {item}

</ReactCSSTransitionGroup>

 

本次就先大概说明到这里。关于react的路由下次再专门说明，毕竟配路由这事儿还是有点复杂，单独开一篇说明比较清晰