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