React——组件

一、React.createClass与React.Component区别
1、函数this绑定：
React.createClass 创建的组件自动绑定this

const Contacts = React.createClass({  
    handleClick() {
        console.log(this); // React Component instance
    },
    render() {
        return (
            <div onClick={this.handleClick}></div>
        );
    }
});

React.Component创建的组件，其成员函数不会自动绑定this，需要开发者手动绑定

class Contacts extends React.Component {  
    constructor(props) {
        super(props);
    }
    handleClick() {
        console.log(this); // null
    }
    render() {
        return (
          <div onClick={this.handleClick}></div>
        );
    }
}

2、组件属性类型 propTypes 及其默认 props 属性 defaultProps 配置不同
React.createClass在创建组件时，有关组件props的属性类型及组件默认的属性会作为组件实例的属性来配置;defaultProps是使用getDefaultProps方法来获取默认组件属性的

const TodoItem = React.createClass({
    propTypes: { // as an object
        name: React.PropTypes.string
    },
    getDefaultProps(){   // return a object
        return {
            name: ''    
        }
    }
    render(){
        return <div></div>
    }
})

React.Component在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的静态属性来配置的:

class TodoItem extends React.Component {
    static propTypes = {//类的静态属性
        name: React.PropTypes.string
    };

    static defaultProps = {//类的静态属性
        name: ''
    };
}

3、组件初始状态state配置不同
React.createClass创建的组件，其状态state是通过getInitState方法方法来配置组件的相关状态

const TodoItem = React.createClass({
    // return an object
    getInitialState(){ 
        return {
            isEditing: false
        }
    }
    render(){
        return <div></div>
    }
})

React.Component创建的组件，其状态state是在construct中像初始化组件属性一样声明

class TodoItem extends React.Component{
    constructor(props) {
        super(props);
        this.state = { // define this.state in constructor
            isEditing: false
        } 
    }

    render() {
        return <div></div>
    }
}

二、受控组件和非受控组件
1、受控组件(Controlled Component)

class ControlledForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ''
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.updateUsername = this.updateUsername.bind(this);
    }

    updateUsername(e) {
        this.setState({
            username: e.target.value,
        })
    }

    handleSubmit() {}

    render () {
        return (
            <form onSubmit={this.handleSubmit}>
                <input
                    type='text'
                    value={this.state.username}
                    onChange={this.updateUsername} />
                <button type='submit'>Submit</button>
            </form>
        )
    }
}
ReactDOM.render(<ControlledForm />, document.getElementById('react-root'))

受控组件将表单数据统一存放在 state 中，这意味着数据和UI是同步的，React 通过存放的表单数据来渲染UI。这样我们就可以根据用户的输入及时作出响应：验证输入正确性（输入格式、类型等），并作出反馈
根据输入设置其它组件的状态，譬如输入不规范时，提交按钮处于不可用状态

2、非受控组件(Uncontrolled Component)
和传统的表单数据管理一样，由DOM存放表单数据，可以使用React提供的refs来获得DOM元素的引用。

class UnControlledForm extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();
        console.log("Value: ", this.input.value)
    }

    render () {
        return (
            <form onSubmit={this.handleSubmit}>
            <input
                type='text'
                ref={(input) => this.input = input} />
            <button type='submit'>Submit</button>
            </form>
        )
    }
}
ReactDOM.render(<UnControlledForm />, document.getElementById('react-root'));

非受控组件是一种相对简单的方式，在需要的时候（譬如表单提交的时候）一次性获取表单的值。