React入门与实践
在腾讯应用宝前端分享会上分享了react,现将资料整理成这篇文章,希望对react的初学者能够有所帮助;如果文中有描述不恰当或者错误的地方,请望斧正。
1. 为什么使用react
react 是facebook在2013年开源的一个javascript库,主要用来快速的构建页面,使用react主要有以下两个原因:
- 简单的响应式更新。在传统的javascript中,当页面的数据发生变化的时候,我们除了要关注数据的变化,还要更新对应的dom结构,比如一个页面的简单的一个标题This is a title,当其中的内容改为hello world的时候,我们需要如下的操作:
<h1>This is a title</h1> <script> var data="hello world";//在实际中是从后台获取数据 var h1=document.querySelector("h1"); h1.innerHTML=data;//关注dom结构的变化 </script>
如果使用react 的话,只需要将数据设置进去,不需要关注dom结构的变化。
- 组件化。在react中,我们看到的每一个页面其实都是由一个个组件:header,content,footer等组成,这样可以快速的构建页面,而且还利于组件的复用。
2. react基础
2.1 概览
学习编程语言C++,java可能都是hello world说起的,先看一个简单的hello world的例子:
<!-- javacript files--><script src="lib/react.js"></script><script src="lib/react-dom.js"></script><script src="lib/browser.min.js"></script>//...<div id="app"></div><script type="text/babel">var HelloWorld = React.createClass({render: function() {return <h2>Hello World</h2>}})const app =document.getElementById("app");ReactDOM.render(<HelloWorld />, app);</script>
在上面的代码中,我们看到引入了两个库:react.js,react-dom.js,其实使用react的核心库,在0.14版本之前是一个文件,之后分成了两个,react.js包括了组件相关定义的属性、方法,如:react.createClass,react.Componet等;react-dom.js主要是包括了将一个react组件渲染到页面成为真实dom的相关属性,例如:reactDOM.render,findDOMNode。使用react构建一个组件分为以下两步:
(1)定义一个组件,并给组件一个名称;
(2)使用reactDOM.render()方法将组件渲染到页面上。
2.2 组件定义的两种方式
上面有提到组件,那么react怎么定义一个组件呢。有两种方式定义:React.createClass()与class的方式。
React.createClass
这是是react最早的版本提出的一个创建方式,使用的方式是在rener中返回我们需要在页面上看到的dom结构,代码如上图的helloworld例子所示。
class
第二种方式是使用class的方式,这可能是跟es6相契合吧,一个比较建议使用这样的方式;大体语法是 class componentName extends React.Component(完整代码见附件demo01中的helloworld.html)。
class HelloWorld extends React.Component {render(){return (<h2>Hello World!</h2>);}}
2.3 state vs props
在组件定义后,其组件的数据是我们关注的焦点。react中定义了两个属性来描述组件的数据props与state;我们可以将一个组件想象成一个函数,其中props就是传递的参数并且不可以在函数内修改;而state就是其中定义的变量,我们可以对其中的变量进行维护。
export default class Article extends React.Component {render() {const { title } = this.props;return (<div ><h4>{title}</h4>//...</div>);}
}
<Article title={title}/>
我们只需要传递标题的值就可以了,不需要进行其他的操作,因此使用props。
constructor() {super();this.state = {title: "Welcome",};}
<Header changeTitle={this.changeTitle.bind(this)} title={this.state.title} />
这个里面的标题是获取input输入框的值,因此设置为state。演示的效果如下:
我们可能提出疑问,就是如果我们将一个函数B嵌入到另一个函数A中,在A中设置一个变量(state),那么B中就可以使用参数(props)的形式了,的确是可行的,这是两种不同的组件:smart component,dumb component.可以参考Dan的文章 Presentational and Container Components
2.4 react中的交互
react中实现事件绑定的方式是非常简单的,只需要在对应的标签中使用驼峰命名法给其一个绑定的函数即可。最常见的就是一个输入框,我们需要获取其值,因此可以给onChange绑定一个事件。其步骤如下:
- 定义一个handleChange函数
- 在对应的input 中加入函数的绑定input onChange=handleChange(详细代码参见react-webpack)
export default class Header extends React.Component { handleChange(e) { const title = e.target.value; this.props.changeTitle(title); } render() {<input value={this.props.title} onChange={this.handleChange.bind(this)} /> } }
2.5 生命周期
一个react组件有三种状态:mounting,updating,unmounting
mounting:React Component被render解析生成对应的dom节点并被插入浏览器的DOM结构的过程。
updating:当一个组件的状态state发生变化的时候,会进行重新的render过程。
unmounting:是指一个mounted的React Component对应的DOM节点被从DOM节点移除的过程。
其每一个生命状态都有封装对应的hook函数,我们可以通过状态的变化过程来进行数据的加载、修改、移除等。以实现页面的初始化和页面数据的更新。以mouting状态为例,在组件渲染之前,我们可以使用getInitalState来指定数据的初始化值,使用componentDidMount来进行ajax请求,从服务器加载数据等操。代码示例可以参照react-webpack/src/components/Content.js
3. react-router
当页面是组件构成的什么,就天然的时候做单页面应用,可以在发生某种情况下替换掉组件就可以呈现不同的内容了。在讲react-router使用之前,让我们先看看路由实现的一个大体的原理。
一个url一般由这几个部分组成:协议、域名、端口、文件路径、文件名、查询条件与hash值,hash值的变化不会使页面进行更新,基于此原理,可以实现页面路由,其过程一般如下:
- 获取hash的取值情况
- 给每种hash值注册一个回调函数
- 利用window.haschange()来监听hash值得变化,并执行相应的回调函数,实现页面的路由。(代码来自http://web.jobbole.com/86407/)
function Router() {this.routes = {};this.currentUrl = '';
}
Router.prototype.route = function(path, callback) {this.routes[path] = callback || function(){};
};
Router.prototype.refresh = function() {this.currentUrl = location.hash.slice(1) || '/';this.routes[this.currentUrl]();
};
Router.prototype.init = function() {window.addEventListener('load', this.refresh.bind(this), false);window.addEventListener('hashchange', this.refresh.bind(this), false);
}
window.Router = new Router();
window.Router.init();
在html 5标准出现之前history对象的属性与方法比较简单,一般是使用history.back(),history.forward()实现页面的前进与后退。但是在html5中为其添加了新的方法与和一个事件,使其为我们实现页面路由提供了新的方法。其中常用的方法有: history.pushState向当前浏览器的历史堆栈中添加一个新的url; window.onpopstate会在浏览器进行前进后退的时候进行触发。
react-router对两种方式都有实现,我们可以选择任意一种。其调用方式如下:
<nav className="navbar navbar-inverse navbar-fixed-top" role="navigation"><ul className='main-menu'><li><Link to="/">首页</Link></li>//... </ul></nav><Router history={browserHistory}><Route path="/" component={Layout}><IndexRoute component={Content}></IndexRoute>//...</Route></Router>
转载于:https://www.cnblogs.com/zsblogs/p/5794448.html
React入门与实践相关推荐
- 《慕课React入门》总结
React 入门与实战 react组件 虚拟DOM的概念 这是React性能高效的核心算法 React为此引入了虚拟DOM(Virtual DOM)的机制.基于React进行开发时所有的DOM构造都是 ...
- React入门指引与实战
React是Facebook公司推出的前端组件化解决方案,目的在于解决前端开发中存在的各个痛点.目前,前端框架与库层出不穷,形成了异常繁荣的局面,那么Facebook为何还要重复造轮子呢?究其原因,F ...
- React 入门手册
大家好,我是若川.推荐这篇可收藏的React入门手册.也推荐之前一篇类似的文章<如何使用 React 和 React Hooks 创建一个天气应用>. 点击下方卡片关注我.加个星标 Rea ...
- 我的新书《PWA入门与实践》上市了
前言 我初接触PWA是在2017年年初,当时参加了一个前端分享会,其中一个主题就是与PWA相关的,介绍了PWA的Service Worker和安装到桌面的能力,以及这门技术未来的发展趋势,听完这个分享 ...
- 视频教程-2019 react入门至高阶实战,含react hooks-ReactJS
2019 react入门至高阶实战,含react hooks 从事前端开发近5年时间,曾任职于丽珠集团等大型企业担任高级前端开发工程师职位,积累了很多大厂的前端开发经验. 目前处于创业期,正在筹备自己 ...
- Flutter:从入门到实践
课程内容 开篇:迎合未来主流趋势,把握新技术主动权 移动开发的前方突破口在哪里? 小团队如何面向未来做技术选型? 想要独立开发一个产品,能不能做到省心省力? 我用两个关键词来回答这些问题:跨平台.Fl ...
- 初探Electron,从入门到实践
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 在开始之前,我想您一定会有这样的困惑:标题里的Electron 是什么?Electron能做什么?许多伟大的 ...
- 类型即正义:TypeScript 从入门到实践(序章)
作者:一只图雀 仓库:Github .Gitee 图雀社区主站(首发):图雀社区 博客:掘金.知乎.慕课 公众号:图雀社区 联系我:关注公众号后可以加图雀酱微信哦 原创不易,❤️点赞+评论+收藏 ❤️ ...
- react入门代码_如何在React中构建温度控制应用程序-包括提示和入门代码
react入门代码 我们正在建立的 (What we're building) In this beginner React project, we're going to learn how to ...
最新文章
- 信息安全系统设计基础家庭作业
- bzoj3786星系探索 splay
- 从敲入 URL 到浏览器渲染完成、对HTTP协议的理解
- UA MATH567 高维统计专题1 稀疏信号及其恢复4 Basis Pursuit的算法 Projected Gradient Descent
- 实现远程调用_微服务的那些事(三),微服务的远程调用方式。RPC和HTTP
- opencv学习笔记22:傅里叶变换,高通滤波,低通滤波
- OpenGL HDR曝光的实例
- python 提取前五行_Pandas 1:如何在Python中载入数据集
- ESXI转HYPER-V,问题接二连三啊(VMDK转VHD)
- Spring IoC?看这篇文章就够了...
- 高一数学集合知识点整理_高一 | 数学 “集合”知识点总结及归纳~
- 今日计划:修改Plog,为期2天
- 当CodeSmith不在时……
- 用GDAL打开从USGS下载的img影像文件
- 读取jpeg图像数据
- 打开 cmd 的方式
- 月报总结|2月份Moonbeam最新进展
- Codeforces Round #614 (Div. 2) E. Xenon's Attack on the Gangs(DP记忆化搜索+思维)
- 【Typora常用快捷键】
- 09-kafka分区数的设置
热门文章
- python画七边形的角度_python之turtle模块-生化危机
- html li padding,求大神来看为li元素设置相同的padding为何padding-bottom和padding-right为多出一部分_html/css_WEB-ITnose...
- 【java】兴唐第十八节课
- 前端使用crypto.js进行加密学习记录
- Java连接数据库 JDBC
- 0基础JavaScript入门教程(一)认识代码
- iOS 性能优化总结
- 创新类编辑推荐:Sequence iBPMS平台
- 轻松记账工程冲刺第二阶段10
- Win10系列:JavaScript动画2