基础概念

无状态组件

无状态组件的基础形式：

import React from "react";

const ExampleComponentWithOutState = (props)=>{
    return ( <h1 className="hero__title">这就是一个无状态的组件</h1> )
}

export default class App extends React.Component {
    render() {
        return ( <main> <ExampleComponentWithOutState /> </main> )
    }
}

有状态组件

import React from "react";

const ExampleComponentWithOutState = (props)=>{
    constructor(porps){
        super(props);
        
        this.state = { title:"这就是一个有状态的组件" }
    }

    return ( <h1 className="hero__title"> {this.state.title} </h1> )
}

export default class App extends React.Component {
    render() {
        return ( <main> <ExampleComponentWithOutState /> </main> )
    }
}