react到底怎么学？react的学习之路详细介绍（内附完整实例）-js教程-PHP中文网

react到底怎么学？react的学习之路详细介绍（内附完整实例）

寻∝梦

发布： 2018-09-11 11:51:25

原创

2996人浏览过

学习React不是一蹴而就的事情，入门似乎也没那么简单。但我觉得这一切都是值得的。下面就让我们来阅读本篇文章吧

这是我在学习react中的一些心得，希望能够帮助到大家！

预览

这是一个简单的用户管理系统，拥有增加、删除、更改的功能。

样式

先从最简单的样式讲起吧

React可以使用两种样式，一种是普通的css，一种是在React中定义的样式。

立即进入“豆包AI人工智官网入口”；

立即学习“豆包AI人工智能在线问答入口”；

普通的css样式，通过className=""来引用

<!--普通css样式-->
<style>
	.style_2{
		background-color: #6699ff;
		font-size: 24px;
		padding: 3px 5px 3px 5px;
		color: #FFFFFF;
	}
	.Separate{
		height: 10px;
	}
</style>

登录后复制

<span className="style_2">账号:</span>

登录后复制

React中定义的样式，通过style={}来引用

//React的css样式
	var style_1={
		color:'#9900ff',
		padding:3,
	}

登录后复制

<h1 style={style_1}>落叶丶Fly的React小站</h1>

登录后复制

组件

豆包爱学

豆包旗下AI学习应用

674

查看详情

构建组件（名字随意起，首字母要大写），我这里构建了一个叫Board的组件，然后通过getInitialState进行初始化。通过ReactDOM.render加载到html页面中。如果ReactDOM.render中有多个组件或者标签，则需要用一个p标签来包裹。

var Board = React.createClass({
		//初始数据
		getInitialState: function(){
			return ({
				comments: [{account:"123456",name:"落叶丶Fly"},{account:"111111",name:"啦啦啦"}]
			});    },

登录后复制

//初始化
		eachComment: function(text,i){
			return (
				<Comment deleteFromBoard={this.removeComment} updateCommentText={this.updateComment} key={i} index={i}>
					<br className="Separate"></br>
					<span className="style_2">账号:</span>
					<span className="style_2">{text.account}</span>
					<br></br>
					<span className="style_2">用户名:</span>
					<span className="style_2">{text.name}</span>
				</Comment>
			);
		},

登录后复制

ReactDOM.render(
		//需要用一个p标签来包裹
		<p>
			<h1 style={style_1}>落叶丶Fly的React小站</h1>
			<Board />
		</p>,
		document.getElementById('container')
	);

登录后复制

props和state

state：React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

props：state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。

函数

React中的button点击事件和普通的JavaScript差不多，但是要注意onClick中的C要大写，否则会报错。本文通过按钮点击来更改editing的布尔值，用setState函数进行更新，从而在普通模式与编辑模式中切换。（想看更多就到PHP中文网React参考手册栏目中学习）

<button onClick={this.edit}>编辑</button>

登录后复制

		//编辑
		edit: function(){
			this.setState({editing: true});
		},
		//保存
		save: function(){
			var val = this.refs.new_account.value;
			var val1 = this.refs.new_name.value;
			console.log("拿到的值是: " + val+val1);
			this.props.updateCommentText(val,val1,this.props.index)
			this.setState({editing: false});
		},

登录后复制

                //普通模式
		renderNormal:function(){
			return (
				<p>
					<p>{this.props.children}</p>
					<button onClick={this.edit}>编辑</button>
					<button onClick={this.remove}>移除</button>
				</p>
			);
		},
		//编辑模式
		renderForm:function(){
			let children =  this.props.children
			return (
				<p>
					<input ref="new_account" type="text" defaultValue = {children[2].props.children} />
					<p></p>
					<input ref="new_name" type="text" defaultValue = {children[5].props.children} />
					<p></p>
					<button onClick={this.save}>保存</button>
				</p>
			)
		},
		//模式更改
		render: function (){
			//console.log(this.props)
			if(this.state.editing){
				return this.renderForm();
			}else{
				return this.renderNormal();
			}
		}

登录后复制

全部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React-Template</title>
    <script type="text/javascript" src="js/react.min.js" ></script>
    <script type="text/javascript" src="js/react-dom.min.js" ></script>
    <script type="text/javascript" src="js/babel.min.js" ></script>
</head>
<!--普通css样式-->
<style>
	.style_2{
		background-color: #6699ff;
		font-size: 24px;
		padding: 3px 5px 3px 5px;
		color: #FFFFFF;
	}
	.Separate{
		height: 10px;
	}
</style>
<body>
	<!-- 容器 -->
	<p id="container"></p>
<script type="text/babel">
	//React的css样式
	var style_1={
		color:'#9900ff',
		padding:3,
	}
	var Board = React.createClass({
		//初始数据
		getInitialState: function(){
			return ({
				comments: [{account:"123456",name:"落叶丶Fly"},{account:"111111",name:"啦啦啦"}]
			});
		},
		//修改并更新数据
		updateComment: function(new_account,new_name,i){
			console.log(new_account+":"+new_name);
			var arr = this.state.comments;
			arr[i].account = new_account;
			arr[i].name = new_name;
			this.setState({comments: arr});
		},
		//删除数据
		removeComment: function(i){
			var arr = this.state.comments;
			arr.splice(i,1);
			this.setState({comments: arr});
		},
		//初始化
		eachComment: function(text,i){
			return (
				<Comment deleteFromBoard={this.removeComment} updateCommentText={this.updateComment} key={i} index={i}>
					<br className="Separate"></br>
					<span className="style_2">账号:</span>
					<span className="style_2">{text.account}</span>
					<br></br>
					<span className="style_2">用户名:</span>
					<span className="style_2">{text.name}</span>
				</Comment>
			);
		},
		//新增用户
		add: function(text){
			var arr = this.state.comments;
			arr.push(text);
			console.log('arr', this.state.comments)
			this.setState({comments: arr});
		},
		render: function(){
			return (
				<p>
					<button onClick={this.add.bind(null,{account:"account",name:"name"})}>新增用户</button>
					<p>
					{
						this.state.comments.map(this.eachComment)
					}
					</p>
				</p>
			);
		}
	});
	//编辑保存移除状态
	var Comment = React.createClass({
		getInitialState: function(){
			return ({editing: false});
		},
		//编辑
		edit: function(){
			this.setState({editing: true});
		},
		//移除
		remove: function(){
			// alert("removing comment!");
			this.props.deleteFromBoard(this.props.index);
		},
		//保存
		save: function(){
			var val = this.refs.new_account.value;
			var val1 = this.refs.new_name.value;
			console.log("拿到的值是: " + val+val1);
			this.props.updateCommentText(val,val1,this.props.index)
			this.setState({editing: false});
		},
		//普通模式
		renderNormal:function(){
			return (
				<p>
					<p>{this.props.children}</p>
					<button onClick={this.edit}>编辑</button>
					<button onClick={this.remove}>移除</button>
				</p>
			);
		},
		//编辑模式
		renderForm:function(){
			let children =  this.props.children
			return (
				<p>
					<input ref="new_account" type="text" defaultValue = {children[2].props.children} />
					<p></p>
					<input ref="new_name" type="text" defaultValue = {children[5].props.children} />
					<p></p>
					<button onClick={this.save}>保存</button>
				</p>
			)
		},
		//模式更改
		render: function (){
			//console.log(this.props)
			if(this.state.editing){
				return this.renderForm();
			}else{
				return this.renderNormal();
			}
		}
	});	
	ReactDOM.render(
		//需要用一个p标签来包裹
		<p>
			<h1 style={style_1}>落叶丶Fly的React小站</h1>
			<Board />
		</p>,
		document.getElementById('container')
	);
</script>
</body>
</html>

登录后复制

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

以上就是react到底怎么学？react的学习之路详细介绍（内附完整实例）的详细内容，更多请关注php中文网其它相关文章！