组件编程-基本组件类型

函数式组件

用于简单组件

<script type="text/babel">

    // 1. 创建函数式组件
    function Demo(){
        // console.log(this);
        return <h2>我是用函数定义的组件, 适用于简单组件</h2>
    }

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

</script>

注意事项

• 注意==标签要闭合==
• 注意==函数首字母要大写, 表示组件==

知识点1: Demo 组件的this对象指向谁?

• 在函数组件 Demo 中，使用 this 是没有意义的，因为函数组件并没有绑定 this。在 React 中，函数组件是没有实例的，所以 this 并不会指向任何具体的对象
• 当你在函数组件中调用 console.log(this) 时，this 将指向全局对象（在浏览器中是 window），或者在严格模式下将是 undefined。==因此，通常不建议在函数组件中使用 this==

知识点2: 渲染函数组件到页面, React做了什么动作

• React解析组件标签，找到了Demo组件
• 发现组件是使用函数定义的，随后调用该函数, 并将返回的虚拟DOM转为真实DOM，随后呈现在页面中

类式组件

用于复杂组件

<script type="text/babel">
    //1.创建类式组件
    class MyComponent extends React.Component {
        render(){
            console.log('render中的this:',this);
            return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
        }
    }
    //2.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>

注意事项

• render()方法, 在类组件中必须存在, 且必须有返回值

知识点1: render()存在哪里?

• MyComponent的原型对象上，供实例使用

知识点2: render()中的this指向谁?

• MyComponent组件实例对象

知识点3: 渲染类组件到页面, React做了什么动作?

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