React 基础 - 03 （组件 – 类组件，类方式组件传参）

1、类组件

        类组件：比函数的功能更为强大

        16.8以前的版本，函数组件被称为无状态（state）组件

        类组件（有状态组件），具有state、生命周期

        16.8版本之后，引入了hook特性，可以使函数组件使用到state、生命周期

class Hello extends React.Component {
   //类成员包含：类属性 变量 类方法
   render() {
      return <h3>hello 类组件</h3>;
   }
}

//实例化
let vNode = new Hello().render();

//语法糖，标签调用方式，默认调用render方法
vNode = <Hello />;

//复用
vNode = (
    <div>
       <Hello />
       <Hello />
       {new Hello().render()}
       {new Hello().render()}
      </div>
);
ReactDOM.render(vNode, document.getElementById("root"));

2、类组件传参

        this中有props，直接调用 this.props.xxx 

class Hello extends React.Component {
   render() {
      return <h3>hello {this.props.msg}</h3>;
   }
}

//实例化
let vNode = new Hello({ msg: "传参1" }).render();

//语法糖，标签调用方式，默认调用render方法
vNode = <Hello msg="传参2" />;

//复用
vNode = (
   <div>
      <Hello msg="传参3" />
      <Hello msg="传参4" />
      {new Hello({ msg: "传参5" }).render()}
      {new Hello({ msg: "传参6" }).render()}
   </div>
);
ReactDOM.render(vNode, document.getElementById("root"));