React02_面向组件编程1_函数式组件_类式组件

2 面向组件编程

2.1 两类组件

1. 函数式组件——适用于简单组件

• 简单组件——无state

// 1. 创建函数式组件——首字母大写
function Demo(){
    console.log(this); // undefined
    // babel翻译完开启严格模式，所以为 undefined
    return <h2>我是用函数定义的组件（适用于简单组件的定义）</h2>
}
// 函数调用： Demo()

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

执行ReactDOM.render()之后，发生了什么？

1. React解析组件标签，找见Dome组件
2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，呈现在页面

2. 类式组件——适用于复杂组件

• 复杂组件——有state

<script type="text/babel">
        // 1. 创建类式组件
        class MyComponent extends React.Component {
      
      
            render() {
      
      
                // render是放在类的原型对象上，供实例使用
                // render中的this是—— MyComponent的实例对象

                console.log(this);
                return <h2>我是用函数定义的组件（适用于复杂组件的定义）</h2>
            }
        }

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

执行了ReactDOM.render之后，发生了什么？

• React解析组件标签，找到了MyComponent组件
• 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render上
• 将render返回的虚拟DOM转为真实DOM，随后呈现在页面上

2.1_ 补充_类的基本知识

<script type=text/javascript>
    // 创建一个Person类
    class Person {
      
      
        // 构造器方法
        constructor(name, age){
      
      
            // 构造器中的this是指——类的实例对象
            this.name = name;
            this.age = age;
        }
        // 一般方法
        speak(){
      
      
            // 放在了类的原型对象上 _proto_
            // 通过person实例调用speak时，speak中的this就是person实例
            console.log(`我叫${ 
        this.name},我年龄是${ 
        this.age}`);
        }
    }
    // 创建一个Person的实例对象
    const p1 = new Person('tom', 10);
    const p2 = new Person('fas', 30);

    console.log(p1);
    console.log(p2);
    p1.speak();
    p2.speak();
</script>