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不能其它名称，因为别人就没有给你定义接受变量名称，你就入乡随俗，除非你不想用

谢谢大家的浏览