React学习记录（一）

    很早就听闻大名鼎鼎的react.js了，可是由于我的缘由一直没有接触。这几天想弄一个富文本编辑器放到本身的项目里，在网上找了找，发现一个看起来很棒的富文本编辑器框架——draft.js，原本想马上上手搭建富文本编辑器，结果发现draft.js是基于react的一款框架，因而趁机学习了一下react。

    不得不说react的入门教程真是太贴心了，一步一步的教你利用react搭建一个井字棋小游戏。除了一些基础内容，也通俗的讲了一些比较深层次的东西，好比数据的不可变性和制定列表项key值的重要性等。中文版教程的地址在这：https://react.docschina.org/tutorial/tutorial.html

    学完有如下几点体会：

    1. 组件化：不是以单个的dom元素为单元，而是以大大小小的组件为单元。而且先编写内层的小组件，而后用一个外层的大组件去控制它。大小组件以前经过props进行通信。数据的存储与处理都放在高层组件上，最底层的小组件只负责与用户交互，传递用户触发的事件，并受控的更新dom。也就是负责view这一块，model这一块由上层组件负责。

    2. 状态提高：从小的组件开始编写，在一步步扩展成大的组件的同时进行状态提高。数据的存储与处理应该放在最外层的组件上。当项目扩大须要更外层的组件的时候，就进行状态提高，将数据存储与处理移交给更外层的组件，这样有利于管理数据，将模型与视图分离。当遇到须要同时获取多个子组件数据，或者两个组件之间须要相互通信的状况时，把子组件的 state 数据提高至其共同的父组件当中保存。以后父组件能够经过 props 将状态数据传递到子组件当中。这样应用当中的状态数据就可以更方便地交流共享了。

    3.模型与视图的分离与映射：由于数据都在高层的组件，而视图都在底层的组件上，因此二者的分离十分明显。映射关系则是经过props属性来创建的；当用户触发事件时，利用props属性将事件一路传递到高层组件，在高层组件调用处理函数改变数据；而数据在和底层组件之间也经过props属性创建了映射关系，一旦数据修改，react的脏检查机制会检测到对象的变化，并进一步更新对应的底层视图。