react到底怎麼學？ react的學習之路詳細介紹（內附完整實例）

學習React不是一蹴可幾的事情，入門似乎也沒那麼簡單。但我覺得這一切都是值得的。以下就讓我們來閱讀這篇文章吧

這是我在學習React中的一些心得，希望能夠幫助大家！

預覽

這是一個簡單的使用者管理系統，擁有增加、刪除、變更的功能。

樣式

先從最簡單的樣式講起吧

React可以使用兩種樣式，一種是普通的css，一種是在React中定義的樣式。

普通的css樣式，透過className=""來引用

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

<span>账号:</span>

React中定義的樣式，透過style={}來引用

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

<h1 id="落叶丶Fly的React小站">落叶丶Fly的React小站</h1>

元件

建構元件（名字隨意起，首字母要大寫），我這裡建構了一個叫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 (
				
					

					<span>账号:</span>
					{text.account}
					

					用户名:
					{text.name}
				
			);
		},

ReactDOM.render(
		//需要用一个p标签来包裹
		

			
<h1 id="落叶丶Fly的React小站">落叶丶Fly的React小站</h1>
			
		,
		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>编辑</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 (
				

					
{this.props.children}
					<button>编辑</button>
					移除
				
			);
		},
		//编辑模式
		renderForm:function(){
			let children =  this.props.children
			return (
				

					
					

					
					

					保存
				
			)
		},
		//模式更改
		render: function (){
			//console.log(this.props)
			if(this.state.editing){
				return this.renderForm();
			}else{
				return this.renderNormal();
			}
		}

全部程式碼

nbsp;html>


    
    
    
    <script></script>
    <script></script>
    <script></script>

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

	
	

<script>
	//React的css样式
	var style_1={
		color:&#39;#9900ff&#39;,
		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">
					<span className="style_2">账号:
					<span className="style_2">{text.account}
					<br>
					<span className="style_2">用户名:
					<span className="style_2">{text.name}
				
			);
		},
		//新增用户
		add: function(text){
			var arr = this.state.comments;
			arr.push(text);
			console.log(&#39;arr&#39;, this.state.comments)
			this.setState({comments: arr});
		},
		render: function(){
			return (
				<p>
					<button onClick={this.add.bind(null,{account:"account",name:"name"})}>新增用户
					<p>
					{
						this.state.comments.map(this.eachComment)
					}
					
				
			);
		}
	});
	//编辑保存移除状态
	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}
					<button onClick={this.edit}>编辑
					<button onClick={this.remove}>移除
				
			);
		},
		//编辑模式
		renderForm:function(){
			let children =  this.props.children
			return (
				<p>
					<input ref="new_account" type="text" defaultValue = {children[2].props.children} />
					<p>
					<input ref="new_name" type="text" defaultValue = {children[5].props.children} />
					<p>
					<button onClick={this.save}>保存
				
			)
		},
		//模式更改
		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小站
			<Board />
		,
		document.getElementById(&#39;container&#39;)
	);
</script>

這篇文章到這就結束了（想看更多就到PHP中文網React使用手冊欄位中學習），有問題的可以在下方留言提問。

以上是react到底怎麼學？ react的學習之路詳細介紹（內附完整實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！