react组件

组件

组件可以分为class或函数形式
实例属性：

1. props:
   this.props包括该组件调用者定义的props。（特别注意：this.props.children是一个特殊prop,通常由JSX表达式中的子组件组成）
2. state:
   组件中的state包含了随时可能发生变化的数据。state由用户自定义，他是一个普通的javaScript对象。
   (需要注意到的是：不要直接去改变this.state,因为后续调用的setState()可能会替换掉你的改变。)

class:

1. 定义一个class组件，需要继承React.Component

2. 在React.Component的子类中有个必须定义的rander()函数。

3. class属性：

   defaultProps:
   可以为Class组件添加默认props.这一般用于props未赋值，但又不能为null.props默认设置‘blue’
   displayName:
   displayName字符串大多数用于调试消息。

class Produce extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (
            <div>
                <div>商品图片</div>
            </div>
        );
    }
}

函数：

函数是一个有效的React组件，因为它接收唯一带有数据的“props”（属性）对象与返回一个react元素，这类组件被称为“函数组件”，它本质上就是JavaScript函数。

function User(props) {
    return <div>
        <div className='avatar'>
            <img src={props.item.avatar} alt="" width='80' />
        </div>
        <div >{props.item.name}</div>
        <hr />
    </div>
}