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

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

寻∝梦

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

原创

3036人浏览过

学习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 className="style_2">账号:</span>

登录后复制

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

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

登录后复制

<h1 style={style_1}>落叶丶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 className="style_2">账号:</span>
					{text.account}
					


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

登录后复制

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

登录后复制

props和state

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

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

函数

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

193

查看详情

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 (
				
					
{this.props.children}
					<button onClick={this.edit}>编辑</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();
			}
		}

登录后复制

全部代码




    
    
    React-Template
    
    
    

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

登录后复制

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

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