React.createClass 、React.createElement、Component

react里面有几个需要区别开的函数

React.createClass 、React.createElement、Component

首选看一下在浏览器的下面写法：

    <div id="app">
    </div>
    <script src="../js/react.js"></script>
    <script src="../js/react-dom.js"></script>
    <script src="../js/browser.min.js"></script>
    <script type="text/babel">
     var  Info = React.createClass({  //创建一个react模板
					      render:function(){
					        return <p>createClass----{this.props.you}</p>
					      }
					});
    var eleC = React.createClass({ //创建一个react模板
			      	render:function(){
			        return <div>createElement---{this.props.name}</div>
			    	}
    });
    
    var eleProps = {name:"eleC"};
    var ele = React.createElement(eleC,eleProps); //创建一个react元素；第一个参数为模板，第二个参数为模板的props	
    
    //ReactDOM.render是React的最基本方法用于将模板转为HTML语言，并插入指定的DOM节点。ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹
    ReactDOM.render(
      <div>
        <Info  you="createClass" />
        {ele} 
      </div>,
      document.getElementById('app')
    );
		
    </script>

　　

React.createClass  是创建了一个react模板，使用的时候，像html标签一样，比如上面的info

React.createElement 是创建了一个react元素，相当于把模板具体化，使用的时候，是当做js变量，直接写入，比如上面的 {ele}

 

以上是在浏览器引入的写法，下面看看，用npm构建的写法

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
 
  render() {
    return (
      <div className="App">
        这里是app
      </div>
    );
  }
}

class Info extends Comment{
    render(){
        return (
            <div>
                info
            </div>
        )
    }
}

class Ele extends Comment{
    render(){
        return (
            <div>
                ele
            </div>
        )
    }
}
var myProps ={

};
var ele = React.createElement(Ele,myProps);



ReactDOM.render(<App>
    <Info></Info>
    {ele}
</App>,document.getElementById('root'));

　　

区别在于，使用服务启动，不再需要用 React.createClass 来创建模块，直接使用类，来继承 Component 类即可完成模板创建。。后面使用的方式基本一致。要注意的是内部 初始化 state和props等有区别