初识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,之后再分享出来。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!