React入门实例学习

分类：React作者：编程之家用户

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如果组件之中有复用的代码，需要重新创建一个父类，父类中存储公共代码，返回子类，同时把公用属性...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 re...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层，一个是调...
react 学习12实现 cloneElement
react 本身提供了克隆组件的方法，但是平时开发中可能很少使用，可能是不了解。我公司的项目就没有使用，但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接触 react 就一直使用 mobx 库，上手简单不复杂。
mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc 端可以使用分页进行渲染数限制，在移动端可以使用下拉加载更多。但是对于大量的列表渲染，特别像有实时数据...
react 学习(六) 函数组件实例及类组件生命周期
本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们...
mini react-window(二) 实现可知变化高度虚拟列表
上一小节我们了解了固定高度的滚动列表实现，因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到，这种场景也适合我们常见的大部分场景，例如...
react 学习(五) 完善 setState 及实现 ref
上一小节我们处理了 setState 的批量更新机制，但是我们有两个遗漏点，一个是源码中的 setState 可以传入函数，同时 setState 可以传入第二...
react 学习13实现 PureComponent
我们知道 react 进行页面渲染或者刷新的时候，会从根节点到子节点全部执行一遍，即使子组件中没有状态的改变，也会执行。这就造成了性能不必要的浪费。之前我们了解...
react学习(十) React 中的 context
在平时工作中的某些场景下，你可能想在整个组件树中传递数据，但却不想手动地通过 props 属性在每一层传递属性，contextAPI 应用而生。
react 学习(一) 实现简版虚拟 dom 和挂载
楼主最近入职新单位了，恰好新单位使用的技术栈是 react，因为之前一直进行的是 vue2/vue3 和小程序开发，对于这些技术栈实现机制也有一些了解，最少面试...
react 学习(三) 组件更新
我们上一节了了解了函数式组件和类组件的处理方式，本质就是处理基于 babel 处理后的 type 类型，最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
react学习(八) diff 算法实现
前面几节我们学习了解了 react 的渲染机制和生命周期，本节我们正式进入基本面试必考的核心地带 -- diff 算法，了解如何优化和复用 dom 操作的，还有...
react学习(九) React 新的生命周期
我们在之前已经学习过 react 生命周期，但是在 16 版本中 will 类的生命周期进行了废除，虽然依然可以用，但是需要加上 UNSAFE 开头，表示是不安...
react 学习14实现 React.memo
上一小节我们学习了 react 中类组件的优化方式，对于 hooks 为主流的函数式编程，react 也提供了优化方式 memo 方法，本小节我们来了解下它的用...
细聊Concent & Recoil , 探索react数据流的新开发模式
开源不易，感谢你的支持，❤ star me if you like concent ^_^
使用hel-micro制作远程antd、tdesign-react
hel-micro，模块联邦sdk化，免构建、热更新、工具链无关的微模块方案 ，欢迎关注与了解
setup vs 5 react hooks,助你避开"沟"中陷阱
本文主题围绕concent的setup和react的五把钩子来展开，既然提到了setup就离不开composition api这个关键词，准确的说setup是由...
setState 同步 与异步
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot