react 组件

一、函数式组件

{/*
     - 定义组件的组件名 大写
      - <组件名/> -- 单标签的形式
      - 函数式组件没有 this
*/}

// 1. 定义组件名 大写
function Demo() {
    return <h1>我是函数式组件</h1>
}

// 2. 将组件渲染到页面
ReactDOM.render(<Demo/>, document.getElementById('test'));

二、类式组件

{/*
	创建类式组件
     class 组件名 extends React.Component{...}
     this 指向组件实例对象
*/}

class MyComponent extends React.Component {
    state = {
        name: 'mary'
    }

    render() {
        console.log(this);
        return <h1>我的名字是：{this.state.name}</h1>;
    }
}

// 2. 将组件渲染到页面上
ReactDOM.render(<MyComponent/>, document.getElementById('test'));