目录
1.类组件的继承
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class A{
constructor(n){
this.x = n //this指向当前类的实例,指向B的实例
}
getX(){
console.log(this.x)
}
}
class B{
constructor(props){
1. super(props)
this.y = 100 //B实例添加私有属性
2.super()
//super函数不传值时,会调用A的constructor构造函数,this.x = 空
this.y = 100
3.不调用super()时
console.log(props)
console.log(this)
//报错:this hasn't been initialised - super() hasn't been called
}
//新增的方法:给当前类的实例添加私有属性,和constructor里面添加私有属性一个道理
z = 300;
//es7新增,对当前类设置新增属性
static m = 400 ;
//对当前类设置静态方法
static getM(){}
//当前类的原型B.prototype.getY,当前类的实例.__proto__.getY
getY(){
console.log(this.y)
}
}
let b = new B(100) // 实例化
console.log(b.x)
console.log(b)
console.log(B.prototype)
console.log(b.__proto__)
console.log(b) //添加了z
console.log(b) //添加了m=400后
console.lod(B) //添加了m = 400后
console.log(A) //添加了 m = 400后
console.dir(B.getM) // 添加静态方法后
ReactDOM.render(e,document.getElementById("app"))
</script>
</body>
2.类组件的定义
<body>
(1)定义容器
<div id="app"></div>
(2)引入相关库
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
(3).定义类组件
类组件:有自己的状态和生命周期
class Welcome extends React.Component{
constructor(props){
// this.state = {} //添加状态的方式
super(props) // 相当于调用React.Component组件的this.props=props
console.log(this.props) //输出jack,说明调用了super(props),就可以直接使用到props的值了,在constructor阶段可以直接使用this.props,方便使用
//super()不传值的时候 super()=>console.log(props)=>undefined
}
//必须存在render(),渲染的时候自动被调用,组件内容通过返回值返回
render(){
console.log(this) //当前类的实例
console.log(this.props) // render直接使用this.props能获取到,是因为react自动做的,而不是因为构造函数中super()的调用。
return <h1>hello world</h1>
}
}
const e = <Welcome name = "jack"/>
console.log(e)
(4).生成虚拟DOM
{
type: f Welcome(props)
props:{name:"jack"}
}
(5)虚拟DOM渲染到容器中
函数组件
//虚拟DOM=>type判断(如果是函数组件则自动执行,并把props传入函数)=>真实DOM=>渲染到容器中
类组件
//虚拟DOM=>type判断(如果是类组件new调用,new Welcome(props))=>真实DOM=>渲染到容器中
ReactDOM.render(e,document.getElementById("app"))
</script>
</body>
3.类组件数据的更新(时钟案例)
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
1.原始写法:jsx-element层面
var element =
<div>
<h1>Clock</h1>
<h2>{ new Date().toLacalTimeString() }</h2>
</div>
function tick(){
var element =
<div>
<h1>Clock</h1>
<h2>{ new Date().toLacalTimeString() }</h2>
</div>
console.log(element)
ReactDOM.render(element,document.getElementById("app"))
}
setInterval(tick,1000)
2.函数组件
//封装组件的数据不要写死
function Clock(props){
return(
<div>
<h1>Clock</h1>
<h2>{ props.time }</h2>
</div>
)
}
function tick(){
var element = <Clock time = { new Date().toLocaleTimeString() }/>
ReactDOM.render(element,document.getElementById("app"))
}
setInterval(tick,1000) //手动拨动
3.类组件(手动时钟)
//类组件开销较函数组件大,性能较差
//函数组件转化成类组件
class Clock extends React.Component{
render(){
render的特点1:每次props变化则会重新执行渲染
console.log(this.props) //react自动获取props
return(
<div>
<h1>Clock</h1>
<h2>{ this.props.time }</h2>
</div>
)
}
}
function tick(){
var element = <Clock time = { new Date().toLocaleTimeString() }/>
ReactDOM.render(element,document.getElementById("app"))
}
setInterval(tick,1000) //手动拨动
4.类组件(自动化时钟)
class Clock extends React,Component{
constructor(props){
super(props)
1.初始化状态 挂在到实例上(state状态)
this.state = {time:new Date().toLocalTimeString()}
}
//初始化状态的另外一种写法
//state = {time:new Date().toLocalTimeString()}
render(){
render的特点2:每次强制刷新[ forceUpdate() ]就会重新执行
render的特点3:每次刷新[ this.setState() ]就会重新执行
console.log(this.props)
return(
<div>
<h1>Clock</h1>
<h2>{ this.state.time }</h2>
<button onClick = {
()=>{
//移除
React.unmountComponentAtNode(document.getElementById("app"))
} }>remove Component</button>
</div>
)
}
//生命周期之一:第一次渲染完毕时自动调用
componentDidMount(){
刷新方法一:更改数据+forceUpdate()强制更新
//更改了数据,但是没有渲染更新页面
与vue的双向数据绑定不同,vue数据改变,页面随之重新渲染
this.state.time = "abc"
console.log(this.state) //输出 abc
//强制更新渲染
this.forceUpdate()
刷新方法二:只有调用this.setState()才能刷新页面,不需要强行刷新
this.setState({time:"abc"})
推荐使用this.setState()实现自动化时钟
注意:setState可能是异步的;修改数据,同时渲染render更新渲染
this.timeId = setInterval(()=>{
this.setState({
time:new Date().toLocaleTimeString()
})
},1000)
}
//生命周期之一:组件卸载之前会被调用,一般用来做资源释放操作
componentWillUnmount(){
//清除setInterval定时器
clearInterval(this.timerId)
}
}
var element = <Clock time = { new Date().toLocaleTimeString() }/>
ReactDOM.render(element,document.getElementById("app"))
</script>
</body>