react学习笔记（1）--react组件的创建

  我理解的react核心思想就是组件化吧。虽然之前用vue来写过组件，而且vue的文档也声称推荐页面用若干个组件来进行拼接。但是在vue里面要实现页面全组件化有点艰难啊。相对来说,react的就更容易实现了。在react中，目前我知道的生成组件主要的有三种方式：

     1.createElement方法,这个方法接收三个参数，分别是要创建的元素的类型，也就是标签名，第二个参数是元素自身上的属性，比如元素的class,id等等属性，第三个参数是包含的子元素,如果子元素只是文本可以直接是一个字符串，或者再用createElement来嵌套别的元素

const element =React.createElement("h2",{className:"mycls"},“wodezujian”);  //当前组件只包含一个wodezujian的文本元素

const element =React.createElement("h2",{className:"mycls"},React.createElement("p",{className:"child"},"wodezujian"));//还可以包含另外一个元素

    2.一个return 一个dom结构的function函，如果要返回多个元素可以使用()将dom包起来,组件名称必须是大写开头，这是为了react为了区分自定义组件和原生html标签：

    

function Element(){
  return <h2>我的</h2>   //返回单行元素
}
function Element(){
  return (
    <h2>
     <p>我的</p>     //如果是多行则必须用括号扩起来
    </h2>
  )  
}

   3.es6的类式，在其中调用render方法来返回一个dom结构，自定义组件要从react的Component方法继承，如果需要用到构造函数，就需要使用super方法来继承属性，类似于es5的superClass.call(subClass,args)：

  

class Element extends React.Component{
     constructor(){
         super()  //必须执行继承，不继承就定义this.state会报错
     }
     render(){
        return <h2>我的</h2>
     }
}

以上就是react里面三种基本的构造组件方式，通过这种函数的方式来定义组件，更加简单方便，也更容易抽象出公用的组件,最后的组件可能就是这样：

  <父组件>

   <子组件1></子组件1>

  <子组件2></子组件2>

  <子组件3></子组件3>

  <子组件4></子组件4>

  </父组件>