React-Component(组件)

概述：前面说了元素，元素组合起来就是组件，如果学过EasyUI你会发现有很多已经定义好的组件例如手风琴，树形表格等等，组件的目的是为复用。

组件的表现形式有两种一种是函数（JS一直都有的），一种是ES6 class （类似java类）

1.函数式的组件---没有变量

function getName(){
  return <h1>往前的娘娘</h1>
}

ReactDOM.render(
  getName(),
  document.getElementById("root")
);

总结：只要是html标签的元素就能被渲染，无论调用函数还是常量定义

2.ES6 class的组件--没有变量

class Name extends React.Component {
  render(){
     return <div>
          <h5>成功总是那么不容易</h5>
          <h5>容易的成功有什么意义</h5>
          <h5>追求自己心中的想法前行</h5>
         </div>
  }
}

//类似html标签
const element = <Name/>

总结：1.写法上类似java方式，前一段是类模板的定义，Component是React的内部类（注意类 首字母大写,在定义上可以小写不会报错，最后你会发现用不了--看第三条）

      2.render()相当于它构造函数，只是这个构造函数大家通用一个名称 render(里面返回值是html标签)

      3.类定义好，开始实例化<Name/> 注意看这个格式类似html标签，但有些不同，首字母大写，这就是React实例化类一种规则，这也回答第一条中的问题

        如果小写，它会认为是html标签而不是React正在实例化类，也就是用不了。

      4.最后多说一句：与java对比是不是都是一样套路，创建模板，实例化（这是只是实例化html标签）

3.函数式的组件---有变量

function GetName(props){
  return <h1>{props.name}</h1>
}

const element = <GetName name="往前的娘娘"/>

ReactDOM.render(
  element,
  document.getElementById("root")
);

总结：1.你看能会发现函数定义第一个字母大写了，为了实例化加工一下，注意函数要返回html标签，（因为它只加工html标签）

            2. <GetName name="往前的娘娘"/>  name就是标签的属性，在实例化过程会传个调用函数的这个总标签对象，它可以获取属性name

            3. 函数的变量不一定是props（一般都这么写）最后只要引用和函数调用必须用{}括起来

4.ES6 class的组件--没有变量

class Name extends React.Component {
  render(){
     return <div>
          <h5>{this.props.first}</h5>
          <h5>{this.props.second}</h5>
          <h5>{this.props.third}</h5>
         </div>
  }
}

const element = <Name first="成功总是那么不容易" 
                  second ="容易的成功有什么意义"
                  third="追求自己心中的想法前行"/>
ReactDOM.render(
  element,
  document.getElementById("root")
);

总结：1.你会发现Name并没有接受我传入标签对象，其实它在内部已经传递了，this就是类本对象（像不像java）

             2. 你要注意的是这时候props不能其它名称，因为别人就没有给你定义接受变量名称，你就入乡随俗，除非你不想用

谢谢大家的浏览