React中创建组件的两种方式和传参

第一种方式使用普通的Function(构造函数)：

function Hello(){ 
return <div>哈哈哈</div> 
}

注意点：
注意组件的名称首字母必须是大写
在组件中，必须return返回一个合法的jsx虚拟DOM元素 用的话直接把组件名称丢到页面上即可

[普通Function构造函数创建组件为组件传递数据：]

 RenderDOM.render(
 <div>
  <Hello  name={dog.name} age={dog.age}> </Hello>
</div>
)

【接收外界传过来的数据】
在构造函数中，使用props形参，接收外界 传递过来的数据

function Hello(props){
   console.log(props)
   props.name = zs  //报错。结论：**无论是vue还是react，组件中的props永远都是只读的；不能被重新赋值**
  return <div> 这是Hello组件 --{props.name}---{props.age}</div>
}

第二种创建组件的方式（使用class关键字）

上图是先带我们了解：如何用class关键字，也能实现普通函数的方式去创建对象。分清什么是实例方法和静态方式，实例属性和静态属性。
*【实例的属性 或方法 】 都是通过new 出来的实例对象来访问的
【静态的属性或方法】 都是直接通过class类名来访问的 *
**记住静态属性和方法都挂载给了constructor 构造函数 并不在对象原型身上！！！

注意：

1. 在class的{}区间内，只能写 构造器，静态方法和静态属性，实例方法
2. class关键字内部，还是用普通的构造函数来实现的（本质并没有改变）；所以说；我们把class关键字 称作语法糖

class中的extends关键字
在class类中，可以使用 extends 关键字，实现子类继承父类
语法：class子类 extends父类{}

为什么要用extends ?
有时候我们创建了多个class类,它们里面的属性很多都一样，这样的话；可以使用extends给我们把共同的数据放到一个父类里面，子类直接使用extends关键字 来进行访问父类的属性，相当于prototype

class Father {
  constructor(name,age){
    this.name = name 
    this.age = age
  }
}
class p1 extends Father{
  constructor(name,age){
    //这个super相当于Father的constructor
    super(name,age)
    this.name = name  //语法规范，在子类中 ，this只能放到super之后使用
  }
}

1:为什么一定要在 constructor 中调用super ?
答案： 因为，如果一个子类，通过extends关键字继承了父类，那么，在子类的 constructor构造函数中，必须优先调用一下super()
2:super是个什么东西 ？
super是一个函数，而且它是父类的构造器；子类中的super，其实就是父类中，constructor构造器的一个引用

React中最基本的组件结构

注意：如果要使用class定义组件，必须 让自己的组件，继承自 React.Component

class 组件名称 extends React.Component {
  constructor(){
   //由于Movie组件，继承了React.Component这个父类，所以自定义构造函数中，必须调用super()
    super()
   //只有调用了super()以后，才能使用关键字this
   this.state = {msg:"哈哈哈"}  就相当于vue中 data( { return { } } )             this.state.***的数据都是可读可写的
  }
 //在组件内部，必须有 render函数,render函数的作用，是渲染 当前组件所对应的 虚拟DOM结构
 render(){
    //render函数中，必须return返回合法的jsx虚拟DOM结构
    return  <div> 这是 class创建的组件 ---this.props.name  注意在 class组件内部，this表示当前组件的实例对象 </div>
  }
}

class关键字中访问外界传过来的数据
在class关键字创建的组件中，如果想使用 外界传过来的props参数，不需要接收，直接通过this.props.***就能访问
注意：不论是class还是普通 function创建的组件，它们的props都是只读的；不能被重新赋值

两种创建组件方式的对比
使用class关键字创建的组件，有自己的私有数据（this.state）和生命周期 ；用class关键字创建出来的组件，叫做有状态组件(因为有自己的私有数据)
使用function创建的组件，只有props，没有自己的私有数据和生命周期；所以叫做无状态组件 【今后用的不多】
【有状态组件和无状态组件本质区别就是】: 有无state属性和 有无生命周期函数