初识React,Virutal DOM, State以及生命周期
这是React分类下的第一篇文章,是在了解了一些基本面后,看Tyler文章,边看边理解边写的。
React可以看做是MVC中的V,关注的是视图层。React的组件就像Angular的Directive,包括了HTML,CSS,JS以及相关数据等。React的组件被定义在了以"JSX"为后缀的文件中,这些JSX文件会被最终编译成Javascript文件。
来看一个最基本的写法:
var HelloWorld = React.createClass({
render: function(){
return (
<div>
Hello World!
</div>
)
}
});
ReactDOM.render(<HelloWorld />, document.getElementBy('app'));
以上,我们可以了解到:
- 组件创建:
React.createClass
用来创建组件,接收一个object,render字段必须有 - 组件名称:就像这里的HelloWorld,通常是大写
- 组件渲染:通过
ReactDOM.render
来渲染组件,该方法接收2个参数,一个参数代表组件,另一个代表渲染的位置 - 组件的呈现方式:组件是以类似HTML元素的形式呈现的,另外,如果组件中有变量,变量会以类似HTML元素属性的形式呈现
- JSX:以上的的
<div>Hello World!</div>
和通常的HTML代码不一样,是放在以jsx为后缀的文件中的,最终会被转换成一个Javascript对象,最终React会创建一个"virtual DOM",React会通过React.createElement("div", null, "Hello Wolrd")
创建虚拟的DOM。
1、React在"virtual DOM"这部分是如何工作的?
→ 检查数据发生变化的部分
→ 重新渲染virutal DOM
→ 与上一次的virtual DOM进行比较
→ 在实际DOM上只更新发生变化的部分
2、State
var HelloUser = React.createClass({
getInitialState: function(){
return {
username: 'firstusername'
}
},
render: function(){
return (
<div>
Hello {this.state.username}
</div>
)
}
});
- 设置组件初始状态:通过
getInitialState
方法返回object对象,为state中的字段赋值 - 获取组件状态:通过
this.state.字段名
来获取字段状态 - 设置组件状态:
setState
虽然在上面没有提及,但这个方法时被用来真正设置组件状态的。而且这个setState
方法是最常用的,当页面有数据变化,Reacct会触发setState
方法,渲染virtual DOM,与上一次的virtual DOM进行比较,最后更新发生变化的部分。
2.1 通过事件改变状态
以上,是通过getInitialState
方法设置了一个初始状态,如何通过事件来触发改变状态呢?比如有一个<input>
,通过它的onChange
方法来触发改变状态。
var HelloUser = React.creatClass({
getInitialState: function(){
return {
username: 'darren'
}
},
handleChange: function(e){
this.setState({
usename: e.target.value
});
},
render: function(){
return (
<div>
Hello {this.state.username}<br/>
Change Name:<input type="text" value={this.state.username} onChange={this.handleChange}>
</div>
)
}
});
- input的onChange事件交给了this.handleChange
- 在
handleChange
方法中,通过setState
改变变量的状态,接着,React渲染一个新的virtual DOM, 与上一次的virtual DOM比较差异,最后只更新发生变化的那部分DOM - React的
onChange
方法用来触发事件
2.2 嵌套组件的状态传递
现在,我们知道了如何设置组件的初始状态,也知道如何如何设置组件的状态,现在来到另外一个话题:当主键有嵌套的时候,如何把父组件的状态传递给子组件呢?
先来看没有组件嵌套的情况:
var HelloUser = React.createClass({
render: function(){
return (
<div> Hello, {this.props.name}</div>
)
}
});
ReactDOM.render(<HelloUser name="darren" />, document.getElementById('app'));
- 组件在jsx语法中,是以类似页面元素的形式呈现的,比如这里的
<HelloUser />
,组件中的变量,比如这里的name字段,在jsx语法中是以属性名存在的,比如这里的<HelloUser name="darren">
- 对ReactDOM来说,它知道
<HelloUser name="darren" />
就是需要渲染的组件,HelloUser就是组件的名称,给name赋的值最终赋值给了props属性
再来看存在组件嵌套的情况下,如何传递State。
被嵌套的组件:
var ShowList = React.createClass({
render: function(){
var listItems = this.props.names.map(function(friend){
return <li>{{friend}}</li>;
});
return (
<div>
<h3>Friends</h3>
<ul>
{listItems}
</ul>
</div>
)
}
});
以上,ShowList组件的视图渲染需要外界给names字段赋上数组。也就是<ShowList names=... />
中names属性需要赋值。从哪里赋值呢?可以从嵌套组件的state中获取。
好,那就来到嵌套组件:
var ParentContainer = React.createClass({
getIntitialState: function(){
return {
name: 'darren',
friends:['a','bob']
}
},
render: function(){
return (
<div>
<h3>Name: {this.state.name}</h3>
<ShowList names={this.state.friends}>
</div>
)
}
});
- 我们知道
getIntitialState
中返回对象的各个字段是放在了state中的 - state中的friends是数组,赋值给了ShowList的names属性
- 嵌套组件和被嵌套组件之间state的传递看上去像一条河流,嵌套组件是河流的上游,被嵌套组件是下游,河水是单向流动的,上游的state向下游流动,传递给了下流的被嵌套组件
现在,组件看起来就像C#中对类的封装。React的组件是否和C#中的类有更多的相似性呢?
假设,在显示朋友列表的页面再增加一块区域,用来添加朋友信息。那,我们有必要为这一块添加的区域定义一个组件:
var AddFriend = React.createClas({
getIntialState: function(){
return {
newFriend: ''
}
},
updateNewFriend: function(e){//更新就是为state的newFriend字段赋上当前的值
this.setState({
newFriend: e.target.value
});
},
handleAddNew: function(){
this.props.addNew(this.state.newFriend);
this.setState({
newFriend: ''
});
},
render: function(){
return (
<div>
<input type="text" value={this.state.newFriend} onChange={this.updateNewFriend} />
<button onClick={this.handleAddNew}>Add Friend</button>
</div>
)
}
});
- input文本框的值取决于state中的newFriend字段值
- 为input添加了onChange事件,该事件由updateNewFriend这个代表函数的字段所定义
- 在updateNewFriend函数中,把文本框的当前值赋值给state中的newFriend字段
- 为button添加了一个onClick事件,该事件由handleAddNew所代表函数的字段所定义,而在handleAddNew函数内部,props属性需要由外界来赋值。会类似
<AddFriend addNew={...} />
这样的形式呈现
以上的AddFriend组件是也是一个被嵌套组件,它和ShowList组件被一起嵌套在ParentContainer这个组件中。
于是,就来到了ParentContainer这个组件。
var ParentContainer = React.createClass({
getInitialState: function(){
return {
name: 'darren',
friends: ['a','b']
}
},
addFriend: function(friend){
this.setState({
this.setState({
friends: this.state.friends.concat([friend])
});
});
},
render: function(){
return (
<div>
<h3>Name: {this.state.name}</h3>
<AddFriend addNew={this.addFriend} />
<ShowList names={this.state.friends} />
</div>
)
}
});
被嵌套组件所需要的,都通过嵌套组件的state或函数获得。
2.3 设置组件的属性类型
在上面的AddFriend组件中,button是这样的:<button onClick={this.handleAddNew}>Add Friend</button>
,button的点击事件由handleAddNew函数决定,而handleAddNew函数由this.props.addNew(this.state.newFriend)
所决定,addNew函数是props属性的函数类型字段,是否可以定义呢?答案是可以。
var AddFriend = React.createClas({
getIntialState: function(){
return {
newFriend: ''
}
},
propTypes: {
addNew: React.PropTypes.func.isRequired
},
updateNewFriend: function(e){//更新就是为state的newFriend字段赋上当前的值
this.setState({
newFriend: e.target.value
});
},
handleAddNew: function(){
this.props.addNew(this.state.newFriend);
this.setState({
newFriend: ''
});
},
render: function(){
return (
<div>
<input type="text" value={this.state.newFriend} onChange={this.updateNewFriend} />
<button onClick={this.handleAddNew}>Add Friend</button>
</div>
)
}
});
3、组件的生命周期
组件的生命周期又是怎样的呢?
var FriendsConainer = React.createClass({
getInitialState: function(){
alert('getInitialState');
return {
name: 'darren'
}
},
componentWillMount: function(){},
componentDidMount: function(){},
componentWillReceiveProps: function(nextProps){},
componentWillUnmount: function(){},
render: function(){
return (
<div>
Hello, {this.state.name}
</div>
)
}
});
- componentWillMount:初次渲染之前调用一次
- componentDidMount:初次渲染之后调用,这时,可以访问virtual DOM了
- componentWillReceiveProps:初次渲染不被调用,只有当props属性值有变化才调用
- componentWillUnmount:从virutal DOM分离的时候调用