初识React.js

React.js是什么

它是facebook开源的一个前端UI框架。专一于view的库，能够和其余的框架或者库一块儿使用。
view是什么？MVC中的V。

前端系统架构模式-MVC

如下对MVC的了解都是基于这篇文章。全栈增加工程师指南

• Model(模型)

用于封装与业务逻辑相关的数据以及处理数据的方法。

介于数据与控制之间的层级，能够直接操做数据-增删改查(数据库操做)。

• View(显示)

这个层负责显示，即用户界面。

• Controller(控制层)

起到不一样层的组织做用。

React.js能作什么

刚开始本身主要是学习阮一峰老师的React 入门实例教程，总结了一些知识。

• 组件

组件是react中构建用户界面的基本单元。
组件和外界交互：状态（state）、属性(props)。状态更多由组件内部本身维护，属性则由外部在初始化这个组件时传递进来。this.props和this.state都是描述组件的特性。this.props表示一旦定义，就再也不改变的特性。this.state是会随着用户互动而产生变化的特性。

• Vritual DOM

数据模型变化须要更新所有的UI界面。
UI界面是一颗DOM树，对应的咱们建立一个全局惟一的数据模型，每次数据模型有任何变更，都将整个数据模型应用到UI DOM树上，由react负责去更新须要更新的界面部分。

• 单向数据流

永远只有从模型到视图的数据流动。

• 其余知识点

  • 数据只读，可以让react组件仅仅经过比较对象引用是否相等来决定是否要从新Render。

  • ReactDOM.render是React的最基本的方法，用于将模板转化成HTML，并插入到指定位置。

  • 获取真实的DOM节点。为DOM节点上加入 ref 属性，而后this.refs.[refName] 就会返回这个真实的DOM节点.

  • 组件的生命周期
    分红三个状态：Mounting：已插入真是DOM；Updating:正在被从新渲染；Unmounting:已移出真实DOM。

  经过以上文章，大致了解react.js的简单的知识，而后开发一个小demo，实际体验一下react.js。

React.js实践

用 React.js 写一个最简单的 To-do List 应用

学习这篇文章，了解了react.js组件化的思想。将一个小小todo list界面，划分红多个组件，组件与组件之间相互组合搭建，最终造成应用。

我在学习搭建todo list小demo时的构建思路是：

• 构建应用界面，划分每个部分的功能

• 分割应用界面，将界面分割成一个一个小的组件

• 从最小的组件开发，经过上层调用底层，逐一搭建应用，直到最总实现功能。

后续

接下来经过学习如下文章：

使用React和Flask开发一个留言板

再一次加深对React.js的了解。坚持！下次实践但愿学习以后，本身设计并开发一个小demo,以后再分享出来。