使用class关键字创建类组件、props参数

import React,{Component} from 'react'
import {render} from 'react-dom'
// 使用class创建组件
class Movie extends Component {
   //  return函数的作用是渲染当前组件所对应的虚拟DOM结构
  render () {
    return <div>1234</div>
  }
}

--------------------------------------------------------------------------

import React from 'react'
import {render} from 'react-dom'

// 使用class创建组件，通过React.Component来继承父类
class Movie extends React.Component {
  render () {
    return <div>1234</div>
  }
}

　　

// react元素

// 这里的Movie标签其实就是Movie类的一个实例对象

const ele = <div>qq<Movie></Movie></div>

// 挂载点

let box = document.querySelector('#app')

// console.log(box)

// 挂载

render(ele,box)

　　

接受props参数

不论是class还是普通function创建的组件，它们的props都是只读的；

// 使用class创建组件
class Movie extends React.Component {
  render () {
    // 在class关键字创建的组件中，如果想要使用外界传递的props参数，不需要接收，直接通过this.props.***访问即可
    return <div>{this.props.name}-----{this.props.age}</div>
  }
}
const user = {
  name: '李李',
  age: '11'
}
// react元素
// 这里的Movie标签其实就是Movie类的一个实例对象
const ele = <div>qq<Movie {...user}></Movie></div>

　　子类的私有数据

// 使用class创建组件
class Movie extends React.Component {
  constructor () {
    super()
    // this.data 就相当于vue中的data（）{return{}} 是可读可写的
    this.data = {
      number: 22
    }
  }
  render () {
    return <div>{this.data.number}</div>
  }
}