个人关于React的一些理解

Posted 2020-08-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了个人关于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>