React入门实例学习

标签: react 实例 学习 | 发表时间:2015-06-06 16:09 | 作者:bijian1013
出处:http://www.iteye.com

        React可以在浏览器运行,也可以在服务器运行,但是在这为了尽量保持简单,且React语法是一致的,服务器的用法和浏览器差别不大,在这只涉及浏览器。
一. HTML模板
        使用React的网页源码,结构大致如下:

<!DOCTYPE html>
<html >
<head>
 <script type="text/javascript" src="react.min.js"></script>
 <script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example" ></div>
<script type="text/jsx">
 //Our code goes here!
</script>
</body>
</html>

注意:
        1.最后一个script标签的type属性为text/jsx。这是因为React独有的JSX语法,跟JavaScript不兼容。凡是使用JSX的地方,都要加上type=”text/jsx”。
        2.React提供两个库:react.js和JSXTransformer.js,它们必须首先加载,其中JSXTransformer.js的作用是将JSX语法转为JavaScript语法。这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。
        $ jsx src/ build/:这个命令可以将src子目录的js文件进行语法转换,转码后的文件全部放在build子目录。

 

二. React.render()
        React.render是React的最基本方法,用于将模板转为HTML语言,并插入指定的DOM节点。
实例一:

<!DOCTYPE html>
<html >
<head>
	<script src="es5-shim.min.js"></script>
	<script src="es5-sham.min.js"></script>
	<script src="console-polyfill.js"></script>
	<script type="text/javascript" src="react.min.js"></script>
	<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example" ></div>

<script type="text/jsx">
	React.render(
		<h1>Hello,World</h1>, 
		document.getElementById("example")
	);
	</script>
</body>
</html>

运行效果:

 

三. JSX语法
        HTML语言直接写在JavaScript语言之中,不加任何引号,这就是JSX的语法,它允许HTML与JavaScript的混写。
实例二:

<!DOCTYPE html>
<html >
<head>
	<script src="es5-shim.min.js"></script>
	<script src="es5-sham.min.js"></script>
	<script src="console-polyfill.js"></script>
	<script type="text/javascript" src="react.min.js"></script>
	<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example" ></div>

<script type="text/jsx">
	var names = ['Alice','Emily','Kate'];
	React.render(
		<div>
		{
			names.map(function(name) {
				return <div>Hello,{name}!</div>
			})
		}
		</div>, 
		document.getElementById("example")
	);
	</script>
</body>
</html>

运行效果:


        上面代码体现了JSX的基本语法规则:遇到HTML标签(以<开头),就用HTML规则解析;遇到代码块(以{开头},就用JavaScript规则解析。
        JSX允许直接在模板插入JavaScript变量。如果这个变量是一个数组,则会展开这个数组的所有成员

实例三:

<!DOCTYPE html>
<html >
<head>
	<script src="es5-shim.min.js"></script>
	<script src="es5-sham.min.js"></script>
	<script src="console-polyfill.js"></script>
	<script type="text/javascript" src="react.min.js"></script>
	<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example" ></div>

<script type="text/jsx">
	var arr = [
		<h1>Hello world!</h1>,
		<h2>React is awesome</h2>
	];
	React.render(
		<div>{arr}</div>, 
		document.getElementById("example")
	);
	</script>
</body>
</html>

        上面代码的arr变量是一个数组,结果JSX会把它的所有成员,添加到模板,运行结果如下:


 

四. 组件
        React允许将代码封装成组件(component),然后像插入普通HTML标签一样,在网页中插入这个组件。React.createClass方法就用于生成一个组件类。
实例四:

<!DOCTYPE html>
<html >
<head>
	<script src="es5-shim.min.js"></script>
	<script src="es5-sham.min.js"></script>
	<script src="console-polyfill.js"></script>
	<script type="text/javascript" src="react.min.js"></script>
	<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example" ></div>

<script type="text/jsx">
	var HelloMessage = React.createClass({
		render: function() {
			return <h1>Hello {this.props.name}</h1>;
		}
	});
	React.render(
		<HelloMessage name="John"/>, 
		document.getElementById("example")
	);
	</script>
</body>
</html>

运行效果:


        上面代码中,变量HelloMessage就是一个组件类。模板插入<HelloMessage/>时,会自动生成HelloMessage的一个实例(下文的“组件”都指组件类的实例)。所有组件类都必须有自已的render方法,用于输出组件。
        组件的用法与原生的HTML标签完全一致,可以任意加入属性,比如<HelloMessage name=”John”/>,就是HelloMessage组件加入一个name属性,值为John。组件的属性可以在组件类的this.props对象上获取,比如name属性就可以通过this.props.name读取。
        添加组件属性,有一个地方需要注意,就是class属性需要写成className,for属性需要写成htmlFor,这是因为class和for是JavaScript的保留字。

 

五. this.props.children
        this.props对象的属性与组件的属性一一对应,但是有一个例外,就是this.props.children属性。它表示组件的所有子节点。
实例五:

<!DOCTYPE html>
<html >
<head>
	<script src="es5-shim.min.js"></script>
	<script src="es5-sham.min.js"></script>
	<script src="console-polyfill.js"></script>
	<script type="text/javascript" src="react.min.js"></script>
	<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>

<script type="text/jsx">
	var NotesList = React.createClass({
		render:function() {
			return (
				<ol>
				{
					this.props.children.map(function(child) {
						return <li>{child}</li>
					})
				}
				</ol>
			);
		}
	});
	React.render(
		<NotesList>
			<span>hello</span>
			<span>world</span>
		</NotesList>,
		document.body
	);
	</script>
</body>
</html>

        上面代码的NoteList组件有两个span子节点,它们都可以通过this.props.children读取,运行结果如下:

        这里需要注意,只有当子节点多于1个时,this.props.children才是一个数组,否则是不能用map方法的,会报错。

 

六. React.findDOMNode()
        组件并不是真实的DOM节点,而是存在于内存之中的一种数据结构,叫做虚拟DOM(virtual DOM)。只有当它插入文档之后,才会变成真实的DOM。根据React的设计,所有的DOM变动,都先在虚拟DOM上发生,然后再将实际发生变动的部分,反映在真实DOM上,这种算法叫做DOM diff,它可以极大提高网页的性能。
        但是,有时需要从组件获取真实DOM的节点,这时就要用到React.findDOMNode方法。
实例六:

<!DOCTYPE html>
<html >
<head>
	<script src="es5-shim.min.js"></script>
	<script src="es5-sham.min.js"></script>
	<script src="console-polyfill.js"></script>
	<script type="text/javascript" src="react.min.js"></script>
	<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example" ></div>

<script type="text/jsx">
	var MyComponent = React.createClass({
		handleClick: function() {
			React.findDOMNode(this.refs.myTextInput).focus();
		},
		render: function() {
			return (
				<div>
					<input type="text" ref="myTextInput"/>
					<input type="button" value="Focus the text input" onClick={this.handleClick}/>
				</div>
			);
		}
	});
	React.render(
		<MyComponent/>,
		document.getElementById('example')
	);
	</script>
</body>
</html>

运行效果:


        上面代码中,组件MyComponent的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的DOM节点,虚拟DOM是拿不到用户输入的。为了做到这一点,文本输入框必须有一个ref属性,然后this.refs.[refName]就指向这个虚拟DOM的子节点,最后通过React.findDOMNode方法获取真实DOM的节点。
        需要注意的是,由于React.findDOMNode方法获取的是真实DOM,所以必须等到虚拟DOM插入文档以后,才能使用这个方法,否则会返回null。上面代码中,通过为组件指定Click事件的回调函数,确保了只有等到真实DOM发生Click事件之后,才会调用React.findDOMNode方法。
        React组件支持很多事件,除了Click事件以外,还有KeyDown、Copy、Scroll等,完整的事件清单请查看官方文档。

 

七. this.state
        组件免不子要与用户互动,React的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染UI,如下实例所示。
实例七:

<!DOCTYPE html>
<html >
<head>
	<script src="es5-shim.min.js"></script>
	<script src="es5-sham.min.js"></script>
	<script src="console-polyfill.js"></script>
	<script type="text/javascript" src="react.min.js"></script>
	<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example" ></div>

<script type="text/jsx">
	var LikeButton = React.createClass({
		getInitialState: function() {
			return {liked:false};
		},
		handleClick: function(event) {
			this.setState({liked:!this.state.liked});
		},
		render: function() {
			var text = this.state.liked?'like':'haven\'t liked';
			return (
				<p onClick={this.handleClick}>
					You {text} this.click to toggle.
				</p>
			);
		}
	});
	React.render(
		<LikeButton/>,
		document.getElementById('example')
	);
	</script>
</body>
</html>

运行效果:

        点击上面这行,将会变成如下内容

        再次点击,会变回初始内容,即点击内容会交替变换。

        上面代码是一个LikeButton组件,它的getInitialState方法用于定义初始状态,也就是一个对象,这个对象可以通过this.state属性读取。当用户点击组件,导致状态变化,this.setState方法就修改状态值,每次修改以后,自动调用this.render方法,再次渲染组件。
        由于this.props和this.state都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props表示那些一旦定义,就不再改变的特性,而this.state是会随着用户互动而产生变化的特性。

 

八. 表单
        用户在表单填入的内容,属于用户跟组件的互动,所以不能用this.props读取。如下实例所示。
实例八:

<!DOCTYPE html>
<html >
<head>
	<script src="es5-shim.min.js"></script>
	<script src="es5-sham.min.js"></script>
	<script src="console-polyfill.js"></script>
	<script type="text/javascript" src="react.min.js"></script>
	<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>

<script type="text/jsx">
	var Input = React.createClass({
		getInitialState: function() {
			return {value:'Hello!'};
		},
		handleChange: function(event) {
			this.setState({value:event.target.value});
		},
		render: function() {
			var value=this.state.value;
			return (
				<div>
					<input type="text" value={value} onChange={this.handleChange}/>
					<p>{value}</p>
				</div>
			);
		}
	});
	React.render(
		<Input/>,
		document.body
	);
	</script>
</body>
</html>

运行效果:

        上面代码中,文本输入框的值,不能用this.props.value读取,而要定义一个onChange事件的回调函数,通过event.target.value读取用户输入的值。textarea元素、select元素、radio元素都属于这种情况,更多介绍请参考官方文档。

 

九. 组件的生命周期
        组件的生命周期分成三个状态:
Mounting:已插入真实DOM
Updating:正在被重新渲染
Unmounting:已移出真实DOM
        React为每个状态都提供了两种处理函数,will函数在进入状态之前调用,did函数在进入状态之后调用,三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
        此外,React还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
        这些方法的详细说明,可以参考官方文档。
实例九:

<!DOCTYPE html>
<html >
<head>
	<script src="es5-shim.min.js"></script>
	<script src="es5-sham.min.js"></script>
	<script src="console-polyfill.js"></script>
	<script type="text/javascript" src="react.min.js"></script>
	<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>

<script type="text/jsx">
	var Hello = React.createClass({ 
	  getInitialState: function() { 
	    return { 
	      opacity: 1.0 
	    }; 
	  }, 
	  componentDidMount: function() { 
	    this.timer = setInterval(function () { 
	      var opacity = this.state.opacity; 
	      opacity -= .05; 
	      if (opacity < 0.1) { 
	        opacity = 1.0; 
	      }  
	      this.setState({ 
	        opacity: opacity 
	      });  
	    }.bind(this), 100); 
	  }, 
	  render: function() {
	  	return (
	  		<div style={{opacity: this.state.opacity}}>
	  			Hello {this.props.name}
	  		</div>
	  	); 
		}
	});

	React.render(
		<Hello name="world"/>,
		document.body
	);
</script>
</body>
</html>

运行效果:

        上面代码在hello组件加载以后,通过componentDidMount方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。
        另外,组件的style属性的设置方式也值得注意,不能写成

style=”opacity:{this.state.opacity};”

        而要写成

style={{opacity:this.state.opacity}}

        这是因为React组件样式是一个对象,所以第一重大括号表示这是JavaScript语法,第二重大括号表示样式对象。

 

十. Ajax
        组件的数据来源,通常是通过Ajax请求从服务器获取,可以使用componentDidMount方法重新渲染UI。
实例十:

<!DOCTYPE html>
<html >
<head>
	<script src="es5-shim.min.js"></script>
	<script src="es5-sham.min.js"></script>
	<script src="console-polyfill.js"></script>
	<script type="text/javascript" src="react.min.js"></script>
	<script type="text/javascript" src="JSXTransformer.js"></script>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>

<script type="text/jsx">
	var UserGist = React.createClass({ 
	  getInitialState: function() {
	  	return {
	  		username:'',
	  		lastGistUrl:''
	  	};
	  },
	  componentDidMount: function() {
	  	$.get(this.props.source, function(result) {
	  		var lastGist = result[0];
	  		if(this.isMounted()) {
	  			this.setState({
	  				username:lastGist.owner.login,
	  				lastGistUrl:lastGist.html_url
	  			});
	  		}
	  	}.bind(this));
	  },
	  render: function() {
	  	return (
	  		<div>
	  			{this.state.username}'s last gist is 
	  			<a href={this.state.lastGistUrl}>here</a>.
	  		</div>
	  	);
	  }
	});

	React.render(
		<UserGist source="https://api.github.com/users/octocat/gists"/>,
		document.body
	);
</script>
</body>
</html>

        上面代码使用jQuery完成Ajax请求,这是为了便于说明。React没有任何依赖,完全可以使用其他库。 





已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [react 实例 学习] 推荐:

React入门实例学习

- - JavaScript - Web前端 - ITeye博客
        React可以在浏览器运行,也可以在服务器运行,但是在这为了尽量保持简单,且React语法是一致的,服务器的用法和浏览器差别不大,在这只涉及浏览器. 一. HTML模板.         使用React的网页源码,结构大致如下:.         1.最后一个script标签的type属性为text/jsx.

React 入门实例教程

- - 阮一峰的网络日志
现在最热门的前端框架,毫无疑问是 React. 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.

谈谈 React Native

- - 唐巧的技术博客
几天前,Facebook 在 React.js Conf 2015 大会上推出了 React Native( 视频链接). 我发了一条微博( 地址),结果引来了 100 多次转发. 为什么 React Native 会引来如此多的关注呢. 我在这里谈谈我对 React Native 的理解. 一个新框架的出现总是为了解决现有的一些问题,那么对于现在的移动开发者来说,到底有哪些问题 React Native 能涉及呢.

Webpack 和 React 小书

- - SegmentFault 最新的文章
Webpack 和 React 小书. 这本小书的目的是引导你进入 React 和 Webpack 的世界. 他们两个都是非常有用的技术,如果同时使用他们,前端开发会更加有趣. 这本小书会提供所有相关的技能. 如果你只是对 React 感兴趣,那可以跳过 Webpack 相关的内容,反之亦然. 如果想学习更多的相关知识可以移步 SurviveJS - Webpack and React.

学习AngularJS实例

- - Web前端 - ITeye博客
怎么样快速学习AngularJS. 相信很多初学者都有过或者类似的疑问,其实这个问题没有标准的答案,每个人的技术背景、工作经验等等都不经相同,所以学习AngularJS的切入点肯定也就不同,我之前初略使用过knockoutjs,当我第一眼看到AngularJS的Helloworld案例后,顿时就被声明式的语法和强大的双向绑定特性所吸引.

轻松入门React和Webpack

- - SegmentFault 最新的文章
小广告:更多内容可以看 我的博客和 读书笔记. 最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰. 一个组件,有自己的结构,有自己的逻辑,有自己的样式,会依赖一些资源,会依赖某些其他组件.

React Native 原理与实践

- - 掘金 前端
React Native 介绍. 什么是 React Native. React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架,它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用. 它既保留了 React 的开发效率,又同时拥有 Native 应用的良好体验,加上 Virtual DOM 跨平台的优势,实现了真正意义上的:.

HBase开发实例学习

- - 互联网 - ITeye博客
在进行Hbase开发前,需要安装JDK、 Hadoop和HBase,选择一款合适的开发IDE,具体安装方法就不介绍了,网上有很多参考资料,这里给出我的开发环境:. 操作系统:Ubuntu 14.04 LTS. Java版本:jdk1.7.0_79. Hadoop版本:hadoop-2.6.0-cdh5.7.1.

React Native通信机制详解

- - bang's blog
React Native是facebook刚开源的框架,可以用javascript直接开发原生APP,先不说这个框架后续是否能得到大众认可,单从源码来说,这个框架源码里有非常多的设计思想和实现方式值得学习,本篇先来看看它最基础的JavaScript-ObjectC通信机制(以下简称JS/OC). 普通的JS-OC通信实际上很简单,OC向JS传信息有现成的接口,像webview提供的-stringByEvaluatingJavaScriptFromString方法可以直接在当前context上执行一段JS脚本,并且可以获取执行后的返回值,这个返回值就相当于JS向OC传递信息.

使用 React 和 Next.js 构建博客

- -
Next.js是由 Vercel 创建和维护的基于 React 的应用程序框架. Next.js构建一个小型的博客网站:. Markdown文件生成的动态路由. 服务器端渲染(在请求时渲染). 本教程将通过创建一个简单的博客来展示. Next.js适合这样的博客的开发吗. 先来了解一下一般博客都需要什么.