##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

个人关于React的一些理解的更多相关文章

  1. 抛开react,如何理解virtual dom和immutability

    去年以来,React的出现为前端框架设计和编程模式吹来了一阵春风.很多概念,无论是原本已有的.还是由React首先提出的,都因为React的流行而倍受关注,成为大家研究和学习的热点.本篇分享主要就聚焦 ...

  2. React 和 Redux理解

    学习React有一段时间了,但对于Redux却不是那么理解.网上看了一些文章,现在把对Redux的理解总结如下 从需求出发,看看使用React需要什么 1. React有props和state pro ...

  3. 对 React Context 的理解以及应用

    在React的官方文档中,Context被归类为高级部分(Advanced),属于React的高级API,但官方并不建议在稳定版的App中使用Context. 很多优秀的React组件都通过Conte ...

  4. 【React】360- 完全理解 redux(从零实现一个 redux)

    点击上方"前端自习课"关注,学习起来~ 前言 记得开始接触 react 技术栈的时候,最难理解的地方就是 redux.全是新名词:reducer.store.dispatch.mi ...

  5. react实例:理解dva构建项目的原理

    请点击相应的步骤查看详情 我们首先搭建一个 dva Demo  项目(请参考react快速构建一个应用项目),然后逐步完成以下内容: 结构划分 设计 Model 组件设计方法 组件设计实践 添加 Re ...

  6. React 的setState 理解

    我们都知道在React中,setState() 方法是用来改变组件状态的,在项目中也一直用,也没有出现什么问题(使用方法太简单了),但今天看了一篇文章,提到了setState 使用时的两个注意点,加深 ...

  7. React refs 的理解

    一.是什么 Refs 在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS) React 中的 Refs提供了一种方式,允许我们访问 DOM节点或在 render ...

  8. React Hooks的理解

    一.是什么 Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook,官方给出的动机是解决长时间使 ...

  9. React生命周期函数理解

    一.组件挂载阶段 1. componentWillMount() 该方法在首次渲染之前调用,在一个组件挂载到卸载的过程中,仅仅执行这一次.该函数内可以state初始化的工作,与constructor的 ...

随机推荐

  1. gradle << 操作符作废

    下面这种写法作废了 task deprecatedSample << { println 'Sample task' } 替换成下面 task newSample {     doLast ...

  2. 使用Spring+Junit4.4进行测试(使用注解)

    http://nottiansyf.iteye.com/blog/345819 使用Junit4.4测试 在类上的配置Annotation @RunWith(SpringJUnit4ClassRunn ...

  3. PHP 返回13位时间戳

    13位时间戳生成函数如下所示: private function getMillisecond() { list($t1, $t2) = explode(' ', microtime()); retu ...

  4. Unity3D优化总结

    1.在使用数组或ArrayList对象时应当注意 length=myArray.Length; for(int i=0;i<length;i++) { } 避免 for(int i=0;i< ...

  5. html css javascript 加载的顺序

    html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...

  6. 飞思卡尔imx6开发板Linux下GPIO驱动

    控制GPIO_1_28的输出: #define MY_BOMB_GPIO       IMX_GPIO_NR(1, 28) 配置为输出方式: gpio_direction_output (MY_BOM ...

  7. 怎样安装Ubuntu操作系统

    (转载自:http://jingyan.baidu.com/article/ff42efa9423991c19e22020d.html) 准备工作 1. 一台普通电脑(装没装操作系统无所谓),保证电脑 ...

  8. cordova + ionic 使用中碰到的一些问题

    cordova + ionic 使用中碰到的一些问题     No Content-Security-Policy meta tag found. Please add one when using ...

  9. iisnode托管node

    1.官方下载iisnode https://github.com/tjanczuk/iisnode 2.安装完成后在IIS中可见

  10. C#TreeView控件遍历文件夹下所有子文件夹以及文件

    一直对递归的理解不深刻,有时候觉得很简单,可是用起来总会出错.这里需要在TreeView控件里显示一个文件夹下的所有目录以及文件,毫无意外的需要用到递归. 一开始,想到用递归写一个生成每一个节点(Tr ...