当前位置：首页 > news >正文

React 重识

news 2025/8/13 15:11:47

基本基础:css html JavaScript

JS 中的类

ES5之前使用function创建一个类

ES6之后引入class关键字

class Person{constructor(name,age){this.name = namethis.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