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

    原文作者:简以凝
    原文地址: https://segmentfault.com/a/1190000007470888
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞