Rumah > Artikel > hujung hadapan web > 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 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 来传递数据。
函数
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使用手册栏目中学习),有问题的可以在下方留言提问。
Atas ialah kandungan terperinci react到底怎么学?react的学习之路详细介绍(内附完整实例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!