React基础知识总结

 1.用React进行了网站的架构，以下就是个人的总结。
  首先要想明白React和JQuery的作用和区别。
  在HTML文档中，JQuery和React都是要进行动态的交互而进行设计的模式，但是在HTML中
  操作Dom是一种很方便思想，我需要做什么交互，我就给该Dom执行什么样的操作，只需要获取，设置
  就可以完成，但是所有的事情都是有利也有弊，操作Dom在网页加载执行的时候是一种很耗费性能的操作，
  因此，出现了一种新的前端交互和构建模式，那就是React，React采用的是模块化和状态化的思想，
  什么意思呢？刚从JQuery转化为React的前端思想，可能是不大能理解这种新的设计模式，
  React采用的是状态来控制交互的模式，页面的每一个部分都是一个组件，是一个独立区域，
  它和之前的div区域有什么不同呢？ 不同点在于，之前的页面头部div就是用来展示的一个区域，
  没有任何的数据，只是HTML构建的，如何要给它赋值，都需要获取这个div来进行操作，
  那么React的头部有什么区别？
         首先，React的头部并不是由HTML的div构建的，它是由js对象创建出来的div，
         说白了就是原生的js，创建HTML元素，这样好处是什么呢？ 那就是js的数据可以和HTML元素
         同时写在一起了，这样一来，就不需要去获取元素，而是直接在标签中使用jsx的语法，将原本的HTML和js的数据一起写在页面中，
         同时再多人开发的时候便于管理，我这部分的数据就在我这个组件的文件中，并不需要想过去满篇去找js文件，来观察是谁操作这部分的代码，
         那么这里问题来了？ 如果我改变了数据，不操作页面的元素，如何重新将我改变的数据，绑定到页面中呢？这里就要说到React的页面渲染，因为
         只要是在页面出现的元素，都是在React的reader函数中，如果我们每次改变数据，都让render函数重新的渲染，不就完成了我们想要的效果吗？顺着这个思路
         render函数如何重新的渲染执行呢？这里也是用到React特有的机制，State对象，在React中，数据的存储最好都在State对象中，当我们要改变数据时，我们只需要调用this.State()方法，
         就可以改变State中数据，只要调用了this.State方法，那么页面就会重新的渲染，这样数据就会刷新在新的页面中，那么问题又来了，我每次更新数据，页面都会重新的渲染，这样一来在性能上应该
         是一个很大的损耗，我变一次刷新一次，想想很严重，这里React其实也想过了这个弊端，所以在设计的时候，采用了虚拟Dom的方法，在元素刷新的时候，会进行一次虚拟Dom的比对，只会更改需要改变的地方，
         如果其他地方没有更改，就不会刷新，这样达到了我们的目的，在React中，reader（）想要重新的执行需要三种情况，首先是State的数据发生变化，其次props的值发生改变（这种通常发生在父组件给子组件传值改变子组件的props）
        最后就是页面的初始化，这样一来，我们就实现数据的单项绑定原则，只要我数据发生了变化，那么页面就会变化，以上就是React的基本只是总结。

2.React-Redux
  使用React-Redux是一种方便用与数据管理交互的组件，首先我们要讨论的是这个东西是干什么的？为什么会出现？
  在React中，我们之前了解到了组件的构建，但是当我们构建了很多的组件，它们之间都有属于自己数据，如果需要数据之间的交互怎么办呢?
  比如，我们想让我们头部组件的数据改变，去影响（头部时间选择组件的数据），思考一下，觉得不是说了State改变就会重新渲染吗，那么把这两个组件放在一个State中来管理，通过改变State，从而使页面重新渲染来完成。
  对！这种思路没有错，这就是React的状态提升，父组件通过自身的State值，来传递给子组件，父组件每次State的值改变，就会重新的渲染，那么就会重新的传递给子组件值，这样一来就是实现了数据的交互，
  但是,如果子组件想要传递值给父组件呢？？ 这里用到的就是父组件传递给子组件一个函数，作为props的属性，这样子组件拿到了这个函数，就可以调用，在调用的时候通过传递参数的形式，来对父组件传值，因为函数在调用的时候，
  实际上还是调用父组件的方法，这样一来父子组件之前的数据传值交互就完成了(这种同样适用于在一个树结构上的组件都可以通过this.props来进行传递)，那么还有最后的一种情况！那就是如果在一个树结构上，两个子节点，如何来进行数据的交互呢?
  那么我们之前使用的方法，就无法完成了，这个时候就需要使用全局变量，使用（global）这个全局的对象，来进行传值，就可以实现我们组件之间数据的交互了。
---以上的这些数值传递可以完成一般的中，小型项目，但是在大的项目，这么复杂的考虑数据的传递问题无疑是加大了开发的难度，那么就出现了一个组件，那就是React-Redux
   它的作用就是用来管理数据的交互！ 首先它实现的原理是通过 action--->store---->reducer 这么一个过程，其原理是，在每次数据要发生变化时，发送一个action来表明我要做什么？ 其次Store接收后，会将自己的数据和action
   一同传递给Reducer，Reducer通过判断action，来进行数据State的改变，这里它要深度拷贝一份State，因为State在React中是不允许直接被修改的，它会把更改后的值传递给Store，Store会把数据传递给绑定好的组件，组件通过Connect方法，
   连接Store，Store会把数据映射到响应组件的Props属性上面，组件也可以通过Connect方法的第二个参数，来将要改变的操作，通过派发action的形式来传递给Store，这里面action是一个对象，接受两个参数，第一个参数是type：字符串
   表明要做的事情，第二个参数是data也就是要改变的数据，这样Store会接受这个action对象，从而把它给reducer进行数据的更改，最终返回给Store，然后在映射到Props属性上面。
   （补充，使用一些中间件比如thunk，可以改变action的类型等）
    以上就是React-Redux对数据管理的机制，这样一来每一个数据都有自己的store，这样在以后的管理与维护都更加的方便，同时，可以使用combineReducers来进行合并ruducer对数据进行更加完善的划分

3.Route
   顾名思义：路由 
   由于现在很多都是单页面的应用程序，因此路由的作用是什么呢，是根据不同url地址，进行不同的页面展示，在单页面应用程序中路由的作用就是对于不同的URL地址，进行不同的组件渲染，这就是核心的关键思想。
  总结：通过以上的3种方法，就可以实现项目的前端界面开发，后端只需要给我们提供接口，就可以完成一个项目的上线运作。