初识React.js

发布时间:2019-08-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了初识React.js脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

React.js是什么

它是faceBook的一个前端ui框架。专注于view的库,可以和其他的框架或者库一起使用。
view是什么?MVC中的V。

前端系统架构模式-MVC

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

  • Model(模型)

  • @H_126_15@

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

    介于数据与控制之间的层级,可以直接操作数据-增删改查(数据库操作)。

    • View(显示)

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

    • Controller(控制层)

    起到不同层的组织作用。

    React.js能做什么

    开始自己主要是学习阮一峰老师的React 入门实例教程,总结了一些知识。

    • 组件

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

    数据模型变化需要更新全部的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,之后再分享出来。

    脚本宝典总结

    以上是脚本宝典为你收集整理的初识React.js全部内容,希望文章能够帮你解决初识React.js所遇到的问题。

    如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。