React与Redux学习

     最近学习了很多关于React的知识，个人觉得这是一个特别人吸引人的前端框架。

首先我们来看一段React的代码：

class NavbarComponent extends Component{

    render(){

      return(

             <div>欢迎来到React</div>

             )

      }

}

ReactDOM.render(

    <NavbarComponent/> ,

    document.getElementById("root")

);

这是ES6的一种写法，语法愈加接近主流后台语言的写法。给人一种亲切感。简单的几句代码就实现了组件化，和虚拟DOM的渲染。

到这里可能有人会问了，这样写岂不是更麻烦，直接写在html中不就可以了吗？

    大家都知道现在大多数网页都是动态网页，这就意味着页面dom元素会平凡的被修改，而大多数js插件都会进行大量的检查操作去追踪要改变的dom元素。

      这会消耗大量的cpu资源，而react能实现只修改改动的dom元素，减少了没有必要的计算。这无疑提高了效率。

React实现了组件化  组件嵌套 高阶组件 等等高级的功能 ，这对于维护和扩展祈祷了极大的帮助，而且对于代码的重用也起到了很大的帮助。

       1.嵌套组件

      字面理解就是在组件中套入一个组件，那有什么样的好处和作用呢请看下列代码:

class AppComponent extends Component{

    render(){

      return(

                <div>

                      <NavbarComponent />

                </div>

             )

      }

}

2.高阶组件

将组件动态生成的方法叫做高阶组件，代码如下：

function createComponent ( component ){

 return class PP extends React.Component {    
    render() {      
      return <component {...this.props}/>    
    }  
  } 

}

这些预定义好的规则和行为，加快了我们的开发效率和代码重用。让代码更加的灵活多变而不失规则。

为了更好的分离这些视图和逻辑之间的耦合，聪明的开发者们有开发出了redux插件，进一步解决了代码逻辑与视图之间的密不可分的关系，逻辑与界面更加清晰可见

这正是利用了  React的组件之间传值的方式实现了 数据Store的共享。