React 面向组件编程

创建函数式组件
创建类式组件

React笔记

创建函数式组件

<body>
	<script type="text/babel">
		//创建函数式组件 需要定义的首字母一定要大写
		function MyNameIsStitch(){
			console.log(this); //此处的this是undefined, 因为babel编译后开启了严格模式
			return <h2>我是用函数定义的组件(适用于 简单组件 的定义)</h2>
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyNameIsStitch/>,document.getElementById('test'))
		/* 
			执行了ReactDOM.render(<MyNameIsStitch/>,document.getElementById('test'))
            之后, 发生了什么?
					1.React解析组件标签, 找到了MyNameIsStitch组件
					2.发现组件是使用函数定义的, 随后调用该函数, 将返回的虚拟DOM转为真实DOM, 随后呈现在页面中
		*/
	</script>
</body>

创建类式组件

<body>
	<!-- 准备好一个"容器" -->
	<div id="test"></div>
	<script type="text/babel">
		//创建类式组件
		class MyNameIsStitch extends React.Component {
			render(){
				//render是放在哪里的?—— MyNameIsStitch的原型对象上, 供实例使用
				//render中的this是谁?—— MyNameIsStitch的实例对象 <=> MyNameIsStitch组件实例对象
				console.log('render中的this:',this);
				return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
			}
		}
		//渲染组件到页面
		ReactDOM.render(<MyNameIsStitch/>,document.getElementById('test'))
		/* 
			执行了ReactDOM.render(<MyNameIsStitch/>.......之后, 发生了什么?
					React解析组件标签, 找到了MyNameIsStitch组件
					发现组件是使用类定义的, 随后new出来该类的实例, 并通过该实例调用到原型上的render方法
					将render返回的虚拟DOM转为真实DOM, 随后呈现在页面中
		*/
	</script>
</body>

作者: 我叫史迪奇
本文来自于: https://sdq3.link/React-Component-oriented.html博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议