React 入门之路
React
React简介
是由Facebook公司推广的一套框架,已经应用instagram等产品
React就是为了提供应用程序性能而设计的一套框架
在angular中,对dom提供了一些指令,让dom具有一些功能,例如ng-repeat让dom具有动态循环渲染的功能,ng-show让dom元素具有动态显隐的功能等等
比如将页面比作一辆汽车,
Angular的实现就是为汽车添加一些装饰,增加一些功能,让汽车看上去很高大尚,这样势必要加大油门
React的实现就是重新制造一辆汽车,是有四个轱辘,即可启动,不要很大的油门
React有三大创新
虚拟dom
组件开发
多端适配
一处开发,处处适用
react在0.13版本之后,做了一个处理
将react文件分成了两个部分
React.js核心库文件(创建虚拟dom的,核心模块,写的应用程序可以兼容所有端)
React-dom.js在浏览器端渲染虚拟dom
创建虚拟dom
由react对象提供的一个方法createElement
第一个参数表示虚拟dom的名称,例如div
有时我们还可以传递组件
第二个参数是一个对象,表示虚拟dom中拥有的属性
从第三个参数开始表示该虚拟dom元素的子元素
子元素也要由createElement创建,但是文本节点可以直接写
方法的返回值是一个虚拟dom(js对象)
Render
由ReactDOM提供的一个方法
三个参数
1 渲染虚拟dom元素
2 真实的dom元素
3 渲染完成回调函数(不常用)
1// 创建虚拟dom 2var h1 = React.createElement( 3 'h1', 4 { 5 title: '这是标题' 6 }, 7 '我是文本内容啦啦啦' 8 ) 9// 将h1渲染到页面中 10ReactDOM.render(h1, document.getElementById('app'), function () { 11 console.log(arguments) 12 console.log(this) })
组件
在react中定义的一个虚拟dom很难复用,所以通常我们将一组虚拟dom定义在组件中来复用
createClass可以用来创建一个组件
参数是一个对象,用来描述组件的
可以在对象中定义render方法,通过返回值来渲染这组组件
返回值,通常所有虚拟dom都在一个容器内
组件式一个类,因此组件名称要以大写字母开头
组件要想渲染到页面中,就要将组件转化成虚拟dom,通过React.createElement方法(由React-dom.js提供)
1var List = React.createClass({ 2 // 通过render渲染页面 3 render: function () { 4 return ( 5 React.createElement( 6 'ul', 7 null, 8 React.createElement('li', null, '六间房秀场'), 9 React.createElement('li', null, '斗鱼TV'), 10 React.createElement('li', null, '美女秀场'), 11 React.createElement('li', null, '秀色直播') 12 ) 13 ) 14 } 15}) 16// 将组件渲染到页面中 17// 转化组件到虚拟DOM 18var ul = React.createElement(List) ReactDOM.render(ul, document.getElementById('app'))
JSX语法
我们写虚拟dom的最大问题,创建一个虚拟dom成本太高了(写的太麻烦了),React团队为了简化对createElement的书写,为我们提供了jsx语法
react团队提供了两种处理方法
第一种,在浏览器端编译
引入编译库,例如browser.js可以对jsx语法编译
此时定义的script标签的type类型要定义成text/babel, 在里面可以写jsx语法
第二种,在工程化中编译(最常见的)
编译jsx语法,跟以前编译less,sass,stylus很像
首先要获取这些jsx文件(通常我们将写jsx语法的文件拓展名改成.jsx)
以fis为例
1fis.match('**.jsx', { 2 // 编译 3 parser: 'babel2', 4 // 更改后缀名称 5 rExt: '.js' })
特殊属性
Class
Class在js中是保留字,因此在react定义虚拟dom的时候,将class写成className
For (是label元素特有的属性)
For是js中的关键字,因此在react定义虚拟dom的时候,将for属性写成htmlFor
1var h1 = (<h1 className="red">我是文本内容啦啦啦</h1>); 2// 将虚拟dom渲染到页面中 3ReactDOM.render(h1, document.getElementById('app')) 4 5// 创建一个组件 6var User = React.createClass({ 7 render: function() { 8 // 返回虚拟dom 9 return ( 10 <div> 11 <label htmlFor="user_name">用户名</label> 12 <input id="user_name" type="text" /> 13 </div> 14 ); 15 } })
插值
React支持插值语法,我们在jsx语法中使用,语法是 {}
一对{}提供了一个js环境,因此我们可以在大括号里面设置虚拟dom元素的属性,设置虚拟dom元素的内容
我们可以在插值符号中使用js中的任何表达式
非元素属性
Key 为列表元素定义react-id,绑定id。这样可以方便获取页面中哪些元素更新了,哪些元素需要更新
Render方法的作用域是组件实例化对象,可以访问到组件中定义的方法
1createChildList: function () { 2 // 遍历数组,处理每一个成员,然后映射一个新数组,就是map方法 3 return data.map(function (value, index) { 4 // 每一个li要绑定内容,还要设置key 5 return <li key={index}>{value}</li>; 6 }) },
属性
在html中,对于同一类元素来说,之所以展现的样式不一样,是因为他们具有不同的属性,所以属性可以让同一类元素展现出不同的状态
同样的道理,在react中,对于同一个组件来说,可以创建一组虚拟dom树,如果想让虚拟dom树展现出不同的状态,我们就要为其添加属性
在虚拟dom上添加属性跟在html中元素上添加属性是一样的,通过添加一个属性实现(只不过在组件上添加的都是自定义属性)
我们添加的自定义属性,会存储在组件的props属性中,我们通过this.props可以访问到里面的数据
组件的默认属性我们定义在getDefaultProps中,通过返回值设置默认属性数据
1// 创建导航标题组件 2var Nav = React.createClass({ 3 // 定义默认属性数据 4 getDefaultProps: function () { 5 // 通过返回值定义默认属性数据 6 return { 7 data: ['默认标题'] 8 } 9 }, 10 // 封装渲染内容的方法 11 createChildList: function () { 12 var me = this; 13 // 遍历this.props.data渲染 14 return this.props.data.map(function (value, index) { 15 return (<a href="" key={index}>{value}{index != me.props.data.length - 1 ? '/' : ''}</a>) 16 }) 17 }, 18 // 通过render方法渲染虚拟dom树 19 render: function () { 20 return ( 21 <div> 22 {this.createChildList()} 23 </div> 24 ) 25 } 26}) 27var data1 = ['财经', '证券', '理财']; 28// 渲染 ReactDOM.render(<Nav data={data1} />, document.getElementById('app'))
样式
在虚拟dom中我们可以为元素定义样式
在react中,虚拟dom上不能使用行内样式字符串,行内样式只能定义成对象,Css属性名称如果出现多个单词,要使用驼峰式命名,例如
border-color => borderColor
还要求浏览器前缀第一个字母要大写,例如
-webkit-box-shadow => WebkitBoxShadow
在createElement方法中,样式写在style中,直接赋值对象,在jsx语法中,样式写在style中,要使用插值语法
1// 定义虚拟dom 2var h1 = React.createElement('h1', { 3 style: { 4 color: 'red', 5 fontSize: '40px' 6 } 7}, '我是文本内容啦啦啦'); 8 9// jsx语法,定义虚拟dom 10var h1 = (<h1 style={{ 11 color: 'green', 12 fontSize: '100px' }}>文本内容</h1>)
事件
React中定义事件,跟在html中定义事件很像
在html中定义事件
<button οnclick="console.log('hello')">按钮</button>
在react中jsx语法中定义事件,跟html中定义事件很像
<button onClick={this.clickBtn}>按钮</button>
on+事件名称=回调函数
事件名称首字母大写
事件回调函数通常绑定组件中的方法
事件回调函数不要执行(后面不要加())
事件回调函数
作用域是组件实例化对象(可以通过this访问组件上的方法以及属性数据)
可以通过bind方法更改作用域
可以通过bind方法传递自定义参数(很少用)
参数有三个
React封装的事件对象(最常用)
React-id
源生的事件对象
1var Demo = React.createClass({ 2 // 定义事件回调函数 3 clickBtn: function () { 4 console.log(arguments) 5 console.log(this) 6 }, 7 render: function () { 8 return ( 9 <div> 10 <button onClick={this.clickBtn.bind(this, 11)}>这是个按钮</button> 11 </div> 12 ) 13 } })
这个就是参数
状态
状态跟属性一样都是在组件内部存储数据的
属性是组件外部传递的数据
状态是组件内部维护的数据
有状态组件以及无状态组件
无状态组件
对于一个组件来说,如果组件没有状态,也就是说组件式一成不变的,组件在创建之后,不会发生交互,请求数据等等,这类组件叫无状态组件,
组件自身不会维护状态
有状态组件
对于一个组件来说,自从创建以后,组件会产生一些交互,请求一些数据,来完成自身状态的更新,这类组件内部必须维护一个状态来存储这些变化的数据,这类组件叫有状态
组件处于哪种状态由其自身存储的数据决定,组件的存储跟属性一样,在组件实例化对象中有个state属性,就是用来存储状态数据
初始化状态用getInitialState方法定义,通过return 将初始化状态的数据返回
修改状态,用setState方法
参数是一个对象,对象中的属性就是即将修改的状态
状态或者属性的改变都会触发render方法的执行,这句话很重要
最后是一个小小的换肤案例
html代码
<html lang="en"> <head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="less/15.less"> </head> <body><div id="app"></div> <script type="text/javascript" src="lib/react.js"></script> <script type="text/javascript" src="lib/react-dom.js"></script> <script type="text/javascript" src="lib/jquery.js"></script> <script type="text/javascript" src="code/15.jsx"></script> </body> </html>
less代码
* {list-style: none;margin: 0;padding: 0; } body {background-repeat: no-repeat;background-attachment: fixed;background-position: center 0;background-size: cover; } #app {width: 1118px;margin: 50px auto;ul {margin-right: -10px;}li {width: 178px;margin-right: 10px;float: left;margin-bottom: 10px;}p {line-height: 30px;text-align: center;}img {cursor: pointer;} }
jsx代码
// 定义换肤组件 var Skin = React.createClass({// 初始化状态数据getInitialState: function () {return {list: []}},// 定义事件回调函数chooseImage: function (e) {// 获取li元素var li = e.currentTarget;// 获取var id = li.getAttribute('data-id')// 用id获取大图片的地址,渲染bodydocument.body.style.backgroundImage = 'url(img/skin/big_' + id + '.jpg)'// console.log(id)},// 定义渲染列表的方法getImageList: function () {var me = this;// 通过状态来渲染了return this.state.list.map(function (obj, index) {return (<li key={index} data-id={obj.id} onClick={me.chooseImage}><img src={"img/skin/" + obj.src} alt=""/><p>{obj.title}</p></li>)})},render: function () {return (<ul>{this.getImageList()}</ul>)},// 发送请求获取数据componentDidMount: function () {var me = this;$.get('data/skin.json', function (res) {// 请求成功,更新状态数据if (res && res.errno === 0) {me.setState({list: res.data})}})} }) // 渲染到页面中 ReactDOM.render(<Skin />, document.getElementById('app'))
转载于:https://www.cnblogs.com/libin-1/p/6550921.html
React 入门之路相关推荐
- DBA入门之路:由浅入深的总结学习法
有很多DBA朋友在入门时总觉得不得路径,长久的徘徊于门外,而过来人的经验又往往高屋建瓴难以落地,两者总觉得难以对接起来,如何才能解决这个问题呢? 我一直推荐的学习方法,之前在文章 DBA入门之路:学习 ...
- react入门代码_如何在React中构建温度控制应用程序-包括提示和入门代码
react入门代码 我们正在建立的 (What we're building) In this beginner React project, we're going to learn how to ...
- React入门看这篇就够了
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所 ...
- 我的机器学习入门之路(下)——知识图谱、推荐、广告
继上一篇<我的机器学习入门之路(中)--深度学习(自然语言处理)>,这一篇博客主要记录了我对知识图谱.推荐和广告等方向的一些涉猎与基础学习. 一.知识图谱 从自然语言处理到知识图谱,是一个 ...
- 我的机器学习入门之路(中)——深度学习(自然语言处理)
继上一篇<我的机器学习入门之路(上)--传统机器学习>,这一篇博客主要记录深度学习(主要是自然语言处理)这一块内容的学习过程.以下均将自然语言处理简称NLP. 这一块内容的学习路线分为三部 ...
- 《慕课React入门》总结
React 入门与实战 react组件 虚拟DOM的概念 这是React性能高效的核心算法 React为此引入了虚拟DOM(Virtual DOM)的机制.基于React进行开发时所有的DOM构造都是 ...
- React入门指引与实战
React是Facebook公司推出的前端组件化解决方案,目的在于解决前端开发中存在的各个痛点.目前,前端框架与库层出不穷,形成了异常繁荣的局面,那么Facebook为何还要重复造轮子呢?究其原因,F ...
- React 入门手册
大家好,我是若川.推荐这篇可收藏的React入门手册.也推荐之前一篇类似的文章<如何使用 React 和 React Hooks 创建一个天气应用>. 点击下方卡片关注我.加个星标 Rea ...
- 【Azure Show】|第九期 “我的计算机入门之路” 嘉宾秦婷婷汪宇杰文轩
欢迎来到Azure Show! Azure Show 欢迎来到Azure Show 第九期!继上期[搭上AI快车]为大家带来数位微软技术专家于各自IT技术领域的经验分享,有2400多人在线上通过b站看 ...
最新文章
- ASP .NET Core MVC Entity Framework 旧书交易网站
- ios unrecognized selector sent to instance出现的原因和解决方案
- 3年完成2款云端AI芯片研发量产,百度造芯为什么这么快?
- iOS.访问通讯录.02.写入联系人
- linux 配置文件解析,任何可以在Linux上轻松解析配置文件的工具?
- all ,any,abs的使用
- yii2_getDb()自动切换数据库
- CentOS 5 安装免费虚拟主机管理系统Kloxo
- 使用pymysql进行数据库的增删改查
- Stringbuffer的线程安全是怎么实现的
- go语言的iota是什么意思_go语言基础之iota枚举
- java中,正则表达式的使用 (最普通使用,Group,贪婪模式)
- android虚拟机的使用教程,Android 虚拟机可以这么用了 ?
- php出库单编号怎么编,求大神帮忙写VBA,出库单自动保存到明细,自动编号
- 虚拟机中修改Fedora10/9屏幕的分辨率
- 用户交易数据分析 -持仓收益(盈亏)胜率等指标计算
- luoguT30208 太极剑(贪心)
- 通过Vue+flvjs在HTML5中播放flv格式视频文件—demo及api
- Excel-如何隐藏/显示某些行项目或者列项目?
- SysML实践指南第二版(中文翻译:刘亚龙)第16章 蒸馏器案例
热门文章
- 用MPLAB IDE编程时,软件总是弹出一个窗口提示: “the extended cpu mode configuration bit is enabled,but the program that
- CTFshow 命令执行 web50
- [YTU]_2907(类重载实现矩阵加法)
- 10.1 分别通过函数和重载运算符来实现复数相加
- Python进阶04 函数的参数对应
- 支持向量机ModuleNotFoundError: No module named ‘sklearn.datasets.samples_generator‘
- 计算机考试一年有肌肉,阅卷老师最想看到什么样的字体?电脑阅卷时代,这种字体很吃香...
- 引入 ServletContextListener @Autowired null 解决办法
- vue项目打包之后原本好的样式变得不好了的原因分析
- 设计模式---设计模式的分类及六大原则