react到底怎么学？react的学习之路详细介绍（内附完整实例）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了react到底怎么学？react的学习之路详细介绍（内附完整实例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6434字，纯文字阅读大概需要10分钟。
内容图文
学习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 (
<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的学习之路详细介绍（内附完整实例）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的react到底怎么学？react的学习之路详细介绍（内附完整实例）全部内容，希望文章能够帮你解决react到底怎么学？react的学习之路详细介绍（内附完整实例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。