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>
}
}