React快速入门教程


Posted in Javascript onJanuary 17, 2017

简介

Facebook官网介绍:React 是一个用来构建用户界面的 JavaScript 库。相当于 MVC 架构的 V 层。

React 的核心思想是:封装组件,各个组件维护自己的状态和UI,当状态变更,自动重新渲染整个组件。

React的优点(React为什么这么火?):

React快速入门教程

组成

React构建界面的三要点:组件、路由、状态管理。

React 的核心内容:JSX和虚拟 DOM。

一个最基本的 React 组件由数据和JSX两个主要部分构成,我们先来看看数据。

React快速入门教程

这是一个简单完整的React组件(类),props 主要作用是提供数据来源,可以简单的理解为 props 就是构造函数的参数。 state 唯一的作用是控制组件的表现,用来存放会随着交互变化状态,比如开关状态等。JSX 做的事情就是根据 state 和 props 中的值,结合一些视图层面的逻辑,输出对应的 DOM 结构。

在组件内部,可以通过this.props来访问props

React的一大创新,就是把每一个组件都看成是一个状态机,组件内部通过state来维护组件状态的变化,这也是state唯一的作用。

React快速入门教程

传统 Web App:是直接和DOM交互,由App来控制DOM的构建和渲染、元素属性的读写、事件的注册和销毁等。

React Web App:是通过虚拟DOM来交互。虚拟DOM是在DOM的基础上建立了一个抽象层,我们对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到DOM中。(渲染效率高)

React目前支持的事件列表:

React快速入门教程

生命周期

大体可以分为三个过程:初始化、更新和销毁,在组件生命周期中,随着组件的props或者state发生改变,它的虚拟DOM和DOM表现也将有相应的变化。

一、初始化:

React快速入门教程

解析:

  1. 组件类在声明时,会先调用 getDefaultProps() 方法来获取默认props值,这个方法会且只会在声明组件类时调用一次,这一点需要注意,它返回的默认props由所有实例共享。
  2. 在组件被实例化之前,会先调用一次实例方法 getInitialState() 方法,用于获取这个组件的初始state。
  3. 实例化之后就是渲染,componentWillMount方法会在生成虚拟DOM之前被调用,你可以在这里对组件的渲染做一些准备工作,比如计算目标容器尺寸然后修改组件自身的尺寸以适应目标容器等等。
  4. 接下来就是渲染工作,在这里你会创建一个虚拟DOM用来表示组件的结构。

对于一个组件来说,render 是唯一一个必须的方法。render方法需要满足这几点:

    1)只能通过 this.props 或 this.state 访问数据

    2)只能出现一个顶级组件

    3)可以返回 null、false 或任何 React 组件

    4)不能对 props、state 或 DOM 进行修改

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
jquery实现提示语淡入效果
May 05 jQuery
JS实现的随机排序功能算法示例
Jun 09 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
javascript操作cookie
Jan 17 #Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 #Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 #Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 #Javascript
微信小程序实战之运维小项目
Jan 17 #Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 #Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 #Javascript
You might like
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
PHP开发中常用的8个小技巧
2008/08/27 PHP
PHP 读取文件的正确方法
2009/04/29 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
PHP curl使用实例
2015/07/02 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
jquery中获取元素的几种方式小结
2011/07/05 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
python单例模式获取IP代理的方法详解
2018/09/13 Python
python实现字符串和字典的转换
2018/09/29 Python
python实现维吉尼亚算法
2019/03/20 Python
python爬虫实现中英翻译词典
2019/06/25 Python
python函数的万能参数传参详解
2019/07/26 Python
python异常触发及自定义异常类解析
2019/08/06 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
Python代码注释规范代码实例解析
2020/08/14 Python
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
交通处罚决定书
2015/06/24 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书