React中创建组件（二）

React中创建组件

第2种 - 创建组件的方式

• 使用 class 关键字来创建组件
• ES6 中 class 关键字，是实现面向对象编程的新形式

了解ES6中 class 关键字的使用

1. class 中 constructor 的基本使用
2. 实例属性和实例方法
3. 静态属性和静态方法
4. 使用 extends 关键字实现继承

// 语法: 
class 子类 extends 父类 {}

基于class关键字创建组件

1. 最基本的组件结构：

class 组件名称 extends React.Component {
	render(){
		return <div>这是 class 创建的组件</div>
	}

• 在 class 关键字创建的组件中，如果想使用 外界传递过来的 props 参数，不需接收，直接通过 this.props.*** 访问即可
• 注意：在 class 组件内部，this 表示 当前组件的实例对象
• 不论是 class 还是普通 function 创建的组件，它们的 props 都是只读的；
• eg:

import React from 'react'
import ReactDom from 'react-dom'

const myH3 = <h3>独自走在繁华的都市，擦身而过的是熙熙攘攘的人群。路灯拉长孤独的身影，热闹都是旁人的，你总是一个人...</h3>;

// class关键字创建组件
class Item extends React.Component {
    //render函数的作用，是渲染当前组件所对应的虚拟DOM元素
    render() {
        return <div>
            <h3>活着就应该听听甜甜的歌， 听听甜甜的故事， 变成甜甜的人</h3>
            <h3>{this.props.name}-----{this.props.age}------{this.props.gender}</h3>
        </div>
    }
}

const  dog = {
    name: '大黄',
    age: '3',
    gender: '雄'
};

// 调用render函数渲染虚拟DOM元素
ReactDom.render(<div>
    {myH3}
    <Item name={dog.name} age={dog.age} gender={dog.gender}/>
    <Item {...dog} />
</div>, document.getElementById('app'));