React---面向组件编程

一、基本理解和使用

1. 使用React开发者工具调试

2. 效果

函数式组件：

<script type="text/babel">
        //1.创建函数式组件
        function MyComponent(){
            console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
            return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
        }
        //2.渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        /* 
            执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
                    1.React解析组件标签，找到了MyComponent组件。
                    2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
        */
    </script>

 

类式组件：

<script type="text/babel">
        //1.创建类式组件
        class MyComponent extends React.Component {
            render(){
                //render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
                //render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
                console.log('render中的this:',this);
                return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
            }
        }
        //2.渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        /* 
            执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
                    1.React解析组件标签，找到了MyComponent组件。
                    2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
                    3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
        */
    </script>

 

3. 注意

1. 组件名必须首字母大写
2. 虚拟DOM元素只能有一个根元素
3. 虚拟DOM元素必须有结束标签

4. 渲染类组件标签的基本流程

1. React内部会创建组件实例对象
2. 调用render()得到虚拟DOM, 并解析为真实DOM
3. 插入到指定的页面元素内部

5. 类的相关知识

　　1.类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
　　2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
　　3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。

<script type="text/javascript" >
        //创建一个Person类
        class Person {
            //构造器方法
            constructor(name,age){
                //构造器中的this是谁？—— 类的实例对象
                this.name = name
                this.age = age
            }
            //一般方法
            speak(){
                //speak方法放在了哪里？——类的原型对象上，供实例使用
                //通过Person实例调用speak时，speak中的this就是Person实例
                console.log(`我叫${this.name}，我年龄是${this.age}`);
            }
        }

        //创建一个Student类，继承于Person类
        class Student extends Person {
            constructor(name,age,grade){
                super(name,age)
                this.grade = grade
                this.school = '尚硅谷'
            }
            //重写从父类继承过来的方法
            speak(){
                console.log(`我叫${this.name}，我年龄是${this.age},我读的是${this.grade}年级`);
                this.study()
            }
            study(){
                //study方法放在了哪里？——类的原型对象上，供实例使用
                //通过Student实例调用study时，study中的this就是Student实例
                console.log('我很努力的学习');
            }
        }
        
        class Car {
            constructor(name,price){
                this.name = name
                this.price = price
                // this.wheel = 4
            }
            //类中可以直接写赋值语句,如下代码的含义是：给Car的实例对象添加一个属性，名为a，值为1
            a = 1
            wheel = 4
            static demo = 100
        }
        const c1 = new Car('奔驰c63',199)
        console.log(c1);
        console.log(Car.demo);
    </script>