React(3)-类组件的继承/定义及数据更新

卷心菜007

已于 2022-08-21 21:21:30 修改

阅读量1.6k

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2022-08-21 21:01:44 首次发布

本文链接：https://blog.csdn.net/m0_65912225/article/details/126443929

版权

React 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

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>