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等有區別