React 重识

基本基础:css html JavaScript

JS 中的类

ES5之前使用function创建一个类

ES6之后引入class关键字

class Person{
            constructor(name,age){
                this.name = name
                this.age = age
            }
            
            running(){
                
            }

        }

        const p = new Person(`why`,18)

ES6 中类的继承 继承是多态的前提

子类中必须通过super()初始化父类的对象

列表循环遍历渲染

// const About = () => {
    
//     return <div>我是关于 </div>
// }
import React from "react"
class About extends React.Component{

    constructor(){
        super()
        this.state = {
            message:`电影列表`,
            movies:["fender","jazzmaster","jaguar"]
        }

    }


    render(){
        const list = []
        for(let movie of this.state.movies){
            list.push(<li>{movie}</li>)
        }
        return <div>
            <h2>{this.state.message}</h2>
            <ul>
                {list}
            </ul>
        </div>
    }
}
export default About

方法二:使用map函数循环渲染

// const About = () => {
    
//     return <div>我是关于 </div>
// }
import React from "react"
class About extends React.Component{

    constructor(){
        super()
        this.state = {
            message:`电影列表`,
            movies:["fender","jazzmaster","jaguar","brighton"]
        }

    }


    render(){
        // const list = []
        // for(let movie of this.state.movies){
        //     list.push(<li>{movie}</li>)
        // }
        return <div>
            <h2>{this.state.message}</h2>
            <ul>
                {this.state.movies.map((item,index)=><li key={index}>{item}</li>)}
            </ul>
        </div>
    }
}
export default About

类组件实现计数器

// const About = () => {
    
//     return <div>我是关于 </div>
// }
import React from "react"
class About2 extends React.Component{

    constructor(){
        super()
        this.state = {
            message:`电影列表`,
            movies:["fender","jazzmaster","jaguar","brighton"]
        }

    }


    render(){
        // const list = []
        // for(let movie of this.state.movies){
        //     list.push(<li>{movie}</li>)
        // }
        return <div>
            <h2>{this.state.message}</h2>
            <ul>
                {this.state.movies.map((item,index)=><li key={index}>{item}</li>)}
            </ul>
        </div>
    }
}

class About extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            counter:0
        }
    }
    increase(){
        console.log(`加一起`)
        
        this.setState({counter:this.state.counter+1})
    }

    decrease(){
        
        console.log(`减小`)
        console.log(this)

        this.setState({counter:this.state.counter-1})

    }

  

    render(){
        

        return <div>
            <h2>当前计数：{this.state.counter}</h2>
            <button onClick={this.increase.bind(this)}>增加+</button>
            <button onClick={this.decrease.bind(this)}>减小-</button>
        </div>
    }
}
export default About