0
点赞
收藏
分享

微信扫一扫

React 学习笔记(7):函数式组件和类式组件

林肯公园_97cc 2022-02-16 阅读 88

React 中组件的定义方式有两种,分别是函数式类式,首先看看函数式组件的写法。

函数式组件

<script type="text/babel">
	//1.创建函数式组件
	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,随后呈现在页面中。
	*/
</script>

函数式组件需要返回虚拟 DOM,这里的写法是使用 jsx 的形式,babel 会将其编译成 react api 调用的形式。

ReactDOM.render() 执行之后发生了什么:

  • ReactDOM.render() 渲染组件时,发现待渲染的组件是函数式组件。
  • 调用该函数,获取该函数返回的虚拟 DOM。
  • 将虚拟 DOM 转成真实 DOM 并渲染到页面上。

类式组件

<script type="text/babel">
	//1.创建类式组件
	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,随后呈现在页面中。
	*/
</script>

类式组件需要定义 render 函数,并且 render 函数需要返回虚拟 DOM。

ReactDOM.render() 执行之后发生了什么:

  • ReactDOM.render() 渲染组件时,发现待渲染的组件是类式组件。
  • React new 出组件的实例,然后调用实例上的 render 方法获取到虚拟 DOM。
  • 将虚拟 DOM 转为真实 DOM 并渲染到页面中。
举报

相关推荐

0 条评论