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 相关文章推荐
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
js document.write()使用介绍
Feb 21 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
jquery CSS选择器笔记
2010/03/29 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
js中DOM事件绑定分析
2018/03/18 Javascript
JS回调函数深入理解
2019/10/16 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
python读取oracle函数返回值
2016/07/18 Python
python中logging包的使用总结
2018/02/28 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Python中按值来获取指定的键
2019/03/04 Python
Python 线程池用法简单示例
2019/10/02 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
Django中的session用法详解
2020/03/09 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
兼职业务员岗位职责
2014/01/01 职场文书
同学会邀请书大全
2014/01/12 职场文书
优秀部门获奖感言
2014/02/14 职场文书
党员入党表决心的话
2014/03/11 职场文书
五四演讲稿范文
2014/09/03 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
公司员工培训管理制度
2015/08/04 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
JavaScript实现简单拖拽效果
2021/09/15 Javascript