12-类组件的基础知识

类组件的基础知识

一、相关知识点

1.类组件的特点

1. 可以声明自己的私有数据；也可以通过props接收外部传递的数据
2. 类组件有组件生命周期（从 创建— 运行—销毁）；函数组件是没有生命周期的

2.挂载

将JSX组件模板，挂载到 #main 这个div上

3.render()

这是生命周期函数，类组件中必须实现生命周期函数，他主要负责渲染JSX 虚拟DOM的

4.类组件

1. 类组件声明的组件必须要继承 React.Component 这个类
2. render（） 在类组件中是必须要写的 主要负责渲染JSX虚拟DOM的
3. 类组件的this, 代表当前组件的实例对象，里面包含了context/props/state 这三个常用属性
4. props接收外部的传值
5. state 用来声明类组件的私有数据
6. 在类组件中，如果没有将值解构出来，需要使用 this.props.属性 来获取到外部传递的值
7. 类组件的基本结构：

 class 组件名 extends React.Component {
        render() {
          return 要渲染的JSX;
        }
      }

### 5.DOM

1.真实DOM

• DOM的本质就是一个对象，里面有各种属性和方法，JS通过DOM 来描述一个标签结构
• DOM的出现就是为了在JS中更加方便的操作标签而设计的，它是HTML标签和JS之间的桥梁
• 在下面的代码中，获取到的div是一个真实DOM 。

6.虚拟DOM

• 不管是函数组件还是类组件，都是虚拟DOM，需要通过ReactDOM.render() 渲染为真实DOM。
• 以类组件Root为例， 就是一个虚拟DOM。、
• 实际上是在实例化(new Promise() 对象)就是在创建组件
• 虚拟DOM与JSX组件模板是映射关系，最终React回见虚拟DOM渲染为真实DOM

二、示例代码

1.引入react和babel并设置响应的script 的类型，和HTML代码

2.JS代码

1.声明一个根组件

// 声明根组件   必须要继承这个  父类
      class RootCom extends React.Component {
        //   这是一个生命周期函数，类组件中必须实现的生命周期函数，他主要负责渲染JSX虚拟DOM的
        render() {
          // props ： 接收外部传值
          // state: 声明类组件的私有数据
          //   console.log(this);//类组件的this  代表当前组件的实例对象，他里面包含context/props/state 三个常用属性
          let { uname, uage, isman } = this.props;
          return (
            <div className="root">
              <h3>我是根组件</h3>
              <p>
                姓名:{uname},年龄:{uage};性别:{isman ? "男" : "女"}
              </p>
              <p>
                {this.props.uname}---{this.props.uage}----
                {this.props.isman ? "男" : "女"}
              </p>

              <hr />
              <Man title="这是标题" />
            </div>
          );
        }
      }

2.将根组件渲染到页面中

let root = <RootCom uname="小明" uage={20} isman={true} />;
      console.log("root", root);//用来确认root是一个虚拟DOM
      ReactDOM.render(root, document.getElementById("main"));

3.声明一个子组件（子组件尽量写在根组件的上面）

  class Man extends React.Component {
        render() {
          return (
            <div className="man">
              <h4>Man 组件</h4>
              <p>文章： {this.props.title}</p>
            </div>
          );
        }
      }

三、结果展示