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> 31

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')); 45

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

 

代码交流 2021