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里的each使用方法详解
Dec 22 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
JS写滑稽笑脸运动效果
May 28 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和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
python处理json数据中的中文
2014/03/06 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
网络安全类面试题
2015/08/01 面试题
建材业务员岗位职责
2013/12/08 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
合作投资意向书
2014/04/01 职场文书
2014年施工员工作总结
2014/11/18 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
工作服管理制度范本
2015/08/06 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python