关于react.js:从零开始学习React笔记

React的组件类型能够分为函数式组件和类式组件：

1.函数式组件是通过定义函数return对应dom建构并通过render函数进行渲染的组件,通常用于简略组件。其构造如下：

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，随后出现在页面中。
        */

2.类式组件是通过继承React.Component并通过render函数进行渲染的组件,通常用于简单组件。其构造如下：

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，随后出现在页面中。
        */