个人关于React的一些理解

##React背景

React是当前前端最火的框架，它的理念思想及构建方法比AngularJS更适合做webApp。

它是由facebook团队研发并开源到社区，所以它有很强大的技术背景，而且它的架构方式也很新颖，有很大的发展前景，极有可能是未来前端框架的领头羊，所以我们可以多关注关注React这个框架。

##React的实现

React是一个组件化的开发方式，任何一个组件都可以被替换或者被更改，每个DOM节点都可以当做是一个组件，这个理念和我们常用的模块化有点类似。

而其功能之所以这么强大是因为其前沿的虚拟DOM技术：react会将HTML的整个DOM节点都复制到内存当中，当某个节点被修改或被替换的时候，它会现在内存中找到被修改的节点，对其内存中虚拟出来的节点进行增删改查等功能后再渲染到页面的真实节点上去，这样就避免了整个页面的重新渲染，而且对虚拟节点的操作效率很高，它省去了去页面渲染的过程。

我们常用的框架常常都要和MVC框架作比较，在这里，React只相当于MVC中 的V，即视图部分，它没有模型和控制器，但它可以和其他模型相配合。

React采用----分而治之的思想，但操作起来比angularJs或者ES6的模块化都要难一点，适合作单页应用。

##React的使用

在使用react的时候最少要引入两个JS文件。



--> React.min.js React-Dom.min.js'



最基本的React操作，如：



    ReactDOM.render(

        React.createElement('h1',null,'Hello Eeact!'),

        document.getElementById('content')

    );



这样开发新节点会显得有点复杂，所以，React又提供了我们一种新的语法，JSX

我们可以通过打包的方式将JSX打包成html代码

我们可以在scrpt标签中定义React的类型：

type = "text/babel"

在向标签中添加类的时候不能写class  只能写className

往标签内写style的时候不能写  style=""  要写成 style ={}



####创建组件



    var MyElement = React.createClass({

        render:function(){

            return <div>

                    <h1>title</h1>

                    </div>

        }

    });



在使用的时候写：



    ReactDOM.render(

        <myElement></myElement>,

        document.getElementById('content')

    );



在JSX的使用中，所有变量的使用都要加一个{}

##React参数的传递

正如我们常会用到值传递一样，React中也有一些值传递的方法:

**如何实现数据传递**:组件与组件之间传递，有两个:props和children,props可以得到当前对象的所有属性和文本属性,而children获取的是开始标签和结尾标签的中间文本,他也是从props里获取的

父组件往子组件传递参数有两种方法：



1、props



用法：现在父组件定义一个属性，然后传给子组件，子组件通过this.props.属性名获取。



2、children



用法：获取开始标签和结束标签中间的内容。



props可以得到属性及children。

而children只能得到开始标签和结束标签中间的内容。



React最难的地方就是数据的传递

##React的redux方法

React中数据传递是单向数据流，每个组件之间交互用state，但state不能传递，由于是单向数据流，所以兄弟之间传递需要通过父级传递，但当组件比较复杂的时候，用这种方法传递就比较混乱

因此React中有个flux模式，他的模式中所有的state放在一个或几个store仓库中，通过dispatch分发来改变store里面的值，如果其他组件绑定store的数据，那么store数据一改，那么组件的数据也会改变，那么所有数据的操作就不会通过state,而是在store里面修改;而**redux就是类似这样流程的工具**，借鉴和改进flux,还可以用在angular和jquery中。

redux的流程：当我们需要操作数据的时候，在调用dispatch之前需要一个action来调用,然后再分发到store里面，store里面有中间键和reducer的函数(负责控制器的作用)来处理将数据存到store,从而改变组件的数据。

store的设计是个难点。

在用redux之前，要先下载：npm install redux,以及下载中间键npm install react-redux



每个action都要写相应的Reducer

const textReducer = function(state = {},action){

      //type字符串一般是大写

      //这里返回的state是新的state

      if (action.type == "ADD_COUT") {

    var newState = Objext.assign({},state,{count:action.count});//assign合并两个对象的方法，传3个参数

      return newState;

      }

    }

创建store: createStore(textReducer);

##关于React的交互问题

这里还必须提到一点就是，因为我们使用React就是因为其操作虚拟DOM的方便快捷，所以在使用React的时候要尽量避免对真实节点的操作。

在React中加事件，如，添加一个点击事件：

    compute:function(){

        if(!this.refs.show.innerHTML){

            this.refs.show.innerHTML = 1;

        }else {

            this.refs.show.innerHTML = parseInt(this.refs.show.innerHTML) + 1; 

        }

        //因为这是操作节点，所以不推荐使用

    },

    render:function(){

        return <div>

        <input type = "button" value ="点击" onClick ={this.compute}/>

        <span ref="show"></span>

        </div>

    }

在React中提供了一个属性 状态：state，每一个组件都可以去创建一个他自己的状态，state的特性是无法传递，只能自己使用，别的组件无法使用。

在使用state的时候，需要做以下几步：



1、初始化state



     getInitialState:function(){

        return {

            //这里定义的就是自己的state属性

            num:0

        }

    }

2、操作state



    compute:function(){

        this.setState({

            num:this.state.num + 1

        })

    }

    在节点中添加

    <span>{this.state.num}</span>

##React的生命周期

在React中，组件与组件之间调用时，常会使用到一些比较特殊的方法，如需要在组件刚刚加载时就执行某个函数，当某个组件的值发生变化时某个组件的某个方法被立即执行等等，这里，我们就需要用到React的生命周期的方法。

在React中又七种生命周期的方法：

**componentWillMount

**componentDidMount

**componentWillReceiveProps

**shouldComponentUpdate

**componentWillUpdate

**componentDidUpdate

**（PS：还有一个我忘了，希望各位大神补充）

其中：

1、**componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，componentDidUpdate**：这四个方法在组件刚加载的时候不会立即执行。

2、shouldComponentUpdate在当前组件的属性值或state发生改变的时候会在render之前执行，而且返回的是布尔值，如果不写或为false，会阻止后面的执行；

3、componentWillUpdate是在更新之前执行的；

4、componentDidUpdate是在render后执行;尽量避免在这三个方法中改state;

5、当props改变的情况下才会执行componentWillReceiveProps,但要改变props值就需要设置子组件,在是四个组件里最先执行的；

6、componentWillReceiveProps可以传参数newProps,得到的是新的props

7、shouldComponentUpdate可以传newState和newProps，可以得到新的state和新的props