React入门实例学习

韩道琦

2015-06-06

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>

运行效果：

React入门实例学习

三. 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>

运行效果：

React入门实例学习
上面代码体现了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>

运行效果：

React入门实例学习
        上面代码中，变量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读取，运行结果如下：

React入门实例学习

这里需要注意，只有当子节点多于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>

运行效果：

React入门实例学习
        上面代码中，组件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>

运行效果：
React入门实例学习

点击上面这行，将会变成如下内容
React入门实例学习

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

上面代码是一个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>

运行效果：
React入门实例学习
上面代码中，文本输入框的值，不能用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>

运行效果：
React入门实例学习

上面代码在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没有任何依赖，完全可以使用其他库。

react javascript jsx

安科网

React入门实例学习

韩道琦

韩道琦

相关推荐

2021适合移动和桌面应用的JavaScript框架是什么

2020年，JavaScript开发人员必备的5项高薪技能

8月份Github上热门的JavaScript开源项目排行

我在大厂写React学到了什么？性能优化篇

React应用程序配置TypeScript

移动前端开发和Web前端开发的区别是什么？

快速入门Web前端开发的正确姿势

移动APP开发有哪些框架？

为何React能成为2021年JavaScript优秀框架？

React Spectrum，Adobe的组件库和工具入门

React实现阿里云OSS上传文件的示例

React组件开发中常见的陷阱

Webpack 原理浅析

react兄弟组件传值

React：虚拟DOM和diff算法

2020年排名前10的Flutter和React Native UI库

React Native pod install错误 SDK \"iphoneos\" cannot be located

深入理解React：diff 算法

react组件通信，引出性能优化问题

5款优秀的前端开发工具，快快收藏

韩道琦