htmledit_views">

函数式组件

1.准备好一个容器

html"><div id="test"></div>

2.创建函数式组件

html" title=javascript>javascript">function MyComponent(){
			console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
			return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
		}

3.渲染组件到页面

html" title=javascript>javascript">ReactDOM.render(<MyComponent/>,document.getElementById('test'))

函数式组件总结

执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？

1.React 解析组件标签，找到了 MyComponent 组件。

2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟 DOM 转为真实 DOM，随后呈现在页面中。

类式组件

1.准备好一个容器

html"><div id="test"></div>

2.创建类式组件 

html" title=javascript>javascript">class MyComponent extends React.Component {
			render(){
				//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
				//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
				console.log('render中的this:',this);
				return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
			}
		}

3.渲染组件到页面

html" title=javascript>javascript">ReactDOM.render(<MyComponent/>,document.getElementById('test'))

类式组件总结

执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？

1.React 解析组件标签，找到了MyComponent 组件。

2.发现组件是使用类定义的，随后 new 出来该类的实例，并通过该实例调用到原型上的 render 方法。

3.将 render 返回的虚拟 DOM 转为真实 DOM，随后呈现在页面中。