React.createClass 、React.createElement、Component

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

React.createClass 、React.createElement、Component

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

1<div id="app">
2    </div>
3    <script src="../js/react.js"></script>
4    <script src="../js/react-dom.js"></script>
5    <script src="../js/browser.min.js"></script>
6    <script type="text/babel">
7     var  Info = React.createClass({  //创建一个react模板
8					      render:function(){
9					        return <p>createClass----{this.props.you}</p>
10					      }
11					});
12    var eleC = React.createClass({ //创建一个react模板
13			      	render:function(){
14			        return <div>createElement---{this.props.name}</div>
15			    	}
16    });
17    
18    var eleProps = {name:"eleC"};
19    var ele = React.createElement(eleC,eleProps); //创建一个react元素；第一个参数为模板，第二个参数为模板的props	
20    
21    //ReactDOM.render是React的最基本方法用于将模板转为HTML语言，并插入指定的DOM节点。ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹
22    ReactDOM.render(
23      <div>
24        <Info  you="createClass" />
25        {ele} 
26      </div>,
27      document.getElementById('app')
28    );
29		
30    </script>

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

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

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

1import React, { Component } from 'react';
2import ReactDOM from 'react-dom';
3
4class App extends Component {
5 
6  render() {
7    return (
8      <div className="App">
9        这里是app
10      </div>
11    );
12  }
13}
14
15class Info extends Comment{
16    render(){
17        return (
18            <div>
19                info
20            </div>
21        )
22    }
23}
24
25class Ele extends Comment{
26    render(){
27        return (
28            <div>
29                ele
30            </div>
31        )
32    }
33}
34var myProps ={
35
36};
37var ele = React.createElement(Ele,myProps);
38
39
40
41ReactDOM.render(<App>
42    <Info></Info>
43    {ele}
44</App>,document.getElementById('root'));

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