react 中创建组件的几种方式

更多见添加的文章连接。

一、函数式组件

函数组件不涉及state状态的改变，只用一个render的方法，输出样式。

function HelloComponent(props,/* context */)
{return<div>Hello{props.name}</div>}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode) 

缺点： 无法访问this,无法访问生命周期函数，只能访问props的数据。

二、类class组件 Es5初代语法。以下两种都可以弥补函数组件的缺点，却也加大了内部程序运行开销

var InputControlES5 =React.createClass({
propTypes:{//定义传入props中的属性各种类型
initialValue:React.PropTypes.string
},
defaultProps:{//组件默认的props对象
initialValue:''
},
// 设置 initial state
getInitialState:function(){//组件相关的状态对象
return{
text:this.props.initialValue||'placeholder'
};
},
handleChange:function(event){
this.setState({//this represents react component instance
text:event.target.value
});
},
render:function(){
return (
<div> Type something:
<inputonChange={this.handleChange}value={this.state.text}/>
</div> );
}});
InputControlES6.propTypes={
initialValue:React.PropTypes.string};
InputControlES6.defaultProps={initialValue:''};

三、Es6初代语法

class InputControlES6 extends React.Component {
    constructor(props) {
        super(props);

        // 设置 initial state
        this.state = {
            text: props.initialValue || 'placeholder'
        };

        // ES6 类中函数必须手动绑定
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }

    render() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange}
               value={this.state.text} />
            </div>
        );
    }
}
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: ''
};


  
  

   
   React.Component 有三种函数绑定的方式：
  
  
  
  

   
   1、构造函数中绑定    
  
  
  
  

   
   
constructor(props) {
       super(props);
       this.handleClick = this.handleClick.bind(this); //构造函数中绑定
  }
   
   

   
   

  
  
  
  

   
   2、使用bind来绑定
   
   

    
    
  
  <div onClick={this.handleClick.bind(this)}></div>

     
     

      
      3、使用arrow function绑定
      
      

       
       
    
<div onClick={()=>this.handleClick()}></div> //使用arrow function来绑定
其中defaultProps是使用getDefaultProps的方法来获取默认组件属性的
        
        

         
         
const TodoItem = React.createClass({
    propTypes: { // as an object
        name: React.PropTypes.string    },
    	getDefaultProps(){   // return a object
        return {
            name: ''}
    }
    render(){
        return <div></div>    }})
class TodoItem extends React.Component {
    static propTypes = {//类的静态属性
        name: React.PropTypes.string
    };
    static defaultProps = {//类的静态属性
        name: ''
    };
    
...}
初始状态state 属性设置不同
const TodoItem = React.createClass({
   // return an object
    getInitialState(){
         return {
            isEditing: false
        }    }
    render(){
        return <div></div>    }})
class TodoItem extends React.Component{
    constructor(props){
        super(props);
        this.state = { // define this.state in constructor
            isEditing: false
        }
     }
    render(){
        return <div></div>    }}


var SomeMixin = {
    doSomething() { }
};
    const Contacts = React.createClass({
    mixins: [SomeMixin],
    handleClick() {
    this.doSomething(); // use mixin  },
    render() {
    return (
      <div onClick={this.handleClick}></div>    );  }});
         
         

         
         

        
        
        
        

         
         
         
         
const TodoItem = React.createClass({
    propTypes: { // as an object
        name: React.PropTypes.string    },
    	getDefaultProps(){   // return a object
        return {
            name: ''}
    }
    render(){
        return <div></div>    }})
class TodoItem extends React.Component {
    static propTypes = {//类的静态属性
        name: React.PropTypes.string
    };
    static defaultProps = {//类的静态属性
        name: ''
    };
    
...}
初始状态state 属性设置不同
const TodoItem = React.createClass({
   // return an object
    getInitialState(){
         return {
            isEditing: false
        }    }
    render(){
        return <div></div>    }})
class TodoItem extends React.Component{
    constructor(props){
        super(props);
        this.state = { // define this.state in constructor
            isEditing: false
        }
     }
    render(){
        return <div></div>    }}


var SomeMixin = {
    doSomething() { }
};
    const Contacts = React.createClass({
    mixins: [SomeMixin],
    handleClick() {
    this.doSomething(); // use mixin  },
    render() {
    return (
      <div onClick={this.handleClick}></div>    );  }});

         
         
Mixins
         
         (混入)是面向对象编程OOP的一种实现，其作用是为了复用共有的代码，将共有的代码通过抽取为一个对象，然后通过
         
         Mixins
         
         进该对象来达到代码复用。
        
        
        
        

         
         
         
         
例如下面这段代码可以使用ref来获取组件挂载到dom中后所指向的dom元素：
         
         
function TestComp(props){    let ref;    return (<div>        <div ref={(node) => ref = node}>            ...        </div>    </div>)}