初识React,Virutal DOM, State以及生命周期
2016-05-17 20:14
751 查看
这是React分类下的第一篇文章,是在了解了一些基本面后,看Tyler文章,边看边理解边写的。
React可以看做是MVC中的V,关注的是视图层。React的组件就像Angular的Directive,包括了HTML,CSS,JS以及相关数据等。React的组件被定义在了以"JSX"为后缀的文件中,这些JSX文件会被最终编译成Javascript文件。
来看一个最基本的写法:
以上,我们可以了解到:
组件创建:
组件名称:就像这里的HelloWorld,通常是大写
组件渲染:通过
组件的呈现方式:组件是以类似HTML元素的形式呈现的,另外,如果组件中有变量,变量会以类似HTML元素属性的形式呈现
JSX:以上的的
→ 重新渲染virutal DOM
→ 与上一次的virtual DOM进行比较
→ 在实际DOM上只更新发生变化的部分
设置组件初始状态:通过
获取组件状态:通过
设置组件状态:
2.1 通过事件改变状态
以上,是通过
input的onChange事件交给了this.handleChange
在
React的
2.2 嵌套组件的状态传递
现在,我们知道了如何设置组件的初始状态,也知道如何如何设置组件的状态,现在来到另外一个话题:当主键有嵌套的时候,如何把父组件的状态传递给子组件呢?
先来看没有组件嵌套的情况:
组件在jsx语法中,是以类似页面元素的形式呈现的,比如这里的
对ReactDOM来说,它知道
再来看存在组件嵌套的情况下,如何传递State。
被嵌套的组件:
以上,ShowList组件的视图渲染需要外界给names字段赋上数组。也就是
好,那就来到嵌套组件:
我们知道
state中的friends是数组,赋值给了ShowList的names属性
嵌套组件和被嵌套组件之间state的传递看上去像一条河流,嵌套组件是河流的上游,被嵌套组件是下游,河水是单向流动的,上游的state向下游流动,传递给了下流的被嵌套组件
现在,组件看起来就像C#中对类的封装。React的组件是否和C#中的类有更多的相似性呢?
假设,在显示朋友列表的页面再增加一块区域,用来添加朋友信息。那,我们有必要为这一块添加的区域定义一个组件:
input文本框的值取决于state中的newFriend字段值
为input添加了onChange事件,该事件由updateNewFriend这个代表函数的字段所定义
在updateNewFriend函数中,把文本框的当前值赋值给state中的newFriend字段
为button添加了一个onClick事件,该事件由handleAddNew所代表函数的字段所定义,而在handleAddNew函数内部,props属性需要由外界来赋值。会类似
以上的AddFriend组件是也是一个被嵌套组件,它和ShowList组件被一起嵌套在ParentContainer这个组件中。
于是,就来到了ParentContainer这个组件。
被嵌套组件所需要的,都通过嵌套组件的state或函数获得。
2.3 设置组件的属性类型
在上面的AddFriend组件中,button是这样的:
componentWillMount:初次渲染之前调用一次
componentDidMount:初次渲染之后调用,这时,可以访问virtual DOM了
componentWillReceiveProps:初次渲染不被调用,只有当props属性值有变化才调用
componentWillUnmount:从virutal DOM分离的时候调用
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分离的时候调用
相关文章推荐
- ReactiveCocoa核心方法bind(绑定)
- ReactNative 使用微软的CodePush进行热更新,继续填坑
- ReactNative浅谈
- React-native windows下android开发入门
- ReactNative 当前url和cookies的获取
- ReactNative 适合初学的第一个教程demo,找租房
- ReactJS读书笔记:DOM操作
- ReactJS学习笔记:感想 - 为什么说Virtual DOM 是React的精髓所在
- ReactJS学习笔记:表单
- ReactJS学习笔记:动画
- ReactNative 从环境和第一个demo说起,填坑教程
- React Native 代码片段
- React Native-目前最火的前端技术?
- react.js 之 批量添加与删除功能
- 如何创建第一个React Native android应用
- React Native 实例 - BBC新闻客户端
- ReactiveCocoa基础和一些常见类介绍
- 配置redux react 以及webpack
- 在Windows下搭建React Native Android开发环境
- React入门教程(二)