reactJS学习笔记（1）--概述react 翻译过来就是响应的意思。定义好数据和视图的关系，通过数据的改变获得一个新

react 翻译过来就是响应的意思。定义好数据和视图的关系，通过数据的改变获得一个新的视图，也就是常说的mvvm模式。reactJS框架就是一个mvvm模式的渲染页面的JavaScript框架。

想开发一个大型的SAP页面（单页面），则需要解决以下几个问题

第一个问题：解耦代码

答案是：设计一套良好的组件化框架。而react已经集成了这个功能。如果你用jquery开发，你就要自己设计一个组件框架，其实也简单，设计一个命名系统和唯一id生成器就可以了。当然也可以参考ExtJS的组件设计。

//伪代码
// 禁用dom的id命名
export default function(){
    return {
        type:'homeListItem',
        content:'<div class="inner"></div>',
        onRender:function(){
              this.find('.inner').on('click',function(){
                  alert(11)
              })
        },
        onRemove:function(){

        }
    }
}

接着就要解决组件的交流问题。react并没有很好的解决方案，需要使用第三方库

react组件内部可以通过共享state来进行交流。组件之间呢，则没啥办法。react提供了一个简单的方法就是“状态提升”。状态提升就是在父类注册一个状态，子类留有回调接口，兄弟组件之间通过修改父类state来相互沟通，这个方法简单有效却过于繁琐，逻辑不够直接，不符合KISS原则。如果页面逻辑简单可以使用。

一种方法是使用redux来进行交流。如果项目规模适当（中型项目），通过redux可以使代码清晰并非常方便测试（状态可回溯）。但是，当项目规模巨大而每个模块并没有什么关联关系的时候，再使用redux就会出现信息灾难，redux就像全局变量一样让所有人不爽。整体的redux应当谨慎使用。最终我使用的是mobx而不是redux。原因是mobx可以在项目中注册多个，各个页面如果需要都可以使用自己的全局状态。同时，我也在整体项目中注册redux，但除了极个别情况（消息箱），很少使用。