初识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。

一、React在"virtual DOM"这部分是如何工做的？

→ 检查数据发生变化的部分
→ 从新渲染virutal DOM
→ 与上一次的virtual DOM进行比较
→ 在实际DOM上只更新发生变化的部分

二、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>
        )
    }
});

三、组件的生命周期

组件的生命周期又是怎样的呢？

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分离的时候调用