react笔记02（组件三大属性之一props属性，自定义组件）

1，自定义组件（Component）

        1）react的核心语法和概念       调试工具安装

        2）作用类似于angular中自定义标签指令

        3）组件的2个基本概念

                  组件类（工厂函数/构造函数/类）：MyComponent

                  组件标签：

        4）定义组件类

                    方法1 ：工厂（无状态）函数

                    function MyComponent1（）{

                        return   

自定义组件标题

                    }

                    方式2 ：ES6类语法（复杂组件，推荐使用）

                    class MyComponent2  extends React.Component{

                        render(){

                            return

自定义组件标题

                        }

                    }

                    方式3 ： ES5老语法

                    var MyComponent3 = React.createClass({

                        render(){

                            return

自定义组件标题

；

                        }

                    });

        5）渲染组件标签

                ReactDom.render(,document.getElementById（‘example’）)；

                注意：

                    1返回的组件类必须首字母大写

                    2 虚拟DOM元素必须只有一个根元素

                    3虚拟DOM元素必须有结束标签

        6)  ReactDom.render（）渲染组件标签的基本流程

                1 React内部会创建组件实例对象

                2 得到包含的虚拟DOM并解析为真实DOM

                3 插入到指定页面元素内部

2，组件3大属性之一：props属性

    1）每个组件对象都会有props（properties的简写）属性

    2） 组件标签的所有属性都会保存在props中

    3） 内部读取某个属性值： this.props.propertyName

    4)   作用：通过标签属性从组件外向组件内传递数据（只读）

    5） 对props中的属性值进行类型限制和必要性限制 使用 PropTypes 进行类型检控制台报错解决措施    

            Person.propTypes = {

                name: React.PropTypes.string.isRequired,

                age:   React.PropTypes.number.isRequired

            }

    6) 扩展属性：将对象的所有属性通过props传递

            

    7) 默认属性值

            Person.defaultPros = {

                    name : "帅明"

              }

    8）组件类的构造函数

                constructor（props）{

                    super（props）；

                    console.log(props); //查看所有属性

                }

        super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

        ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。