likes
comments
collection
share

极智开发 | React 函数式组件 和 类式组件

作者站长头像
站长
· 阅读数 9

欢迎关注我的公众号 [极智视界],获取我的更多笔记分享

  大家好,我是极智视界,本文介绍一下 React 函数式组件 和 类式组件。

  React 是 组件化的 的 JS 库,组件化 也是 React 的核心思想。使用 React 可以构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI。那么什么是组件呢? 组件是用来实现局部功能效果的代码和资源的集合,包括 html / css / js/ image 等,组件的作用是 简化代码、复用代码、提高运行效率

  React 里主要有两种类型的组件:

  • 函数式组件 => 基于函数;
  • 类式组件 => 基于类;

1. 函数式组件

  函数式组件是基于使用 function 定义的函数,函数式组件 和 普通函数 最主要的区别在 调用的时候,函数式组件在渲染的时候没有 被人为显式调用,而是由 React 内部去调用。来看个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React函数式组件</title>
</head>
<body>
	<div id="demo"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="./react.development.js"></script>
	<!-- 引入react-dom,用于支持react操作DOM -->
	<script type="text/javascript" src="./react-dom.development.js"></script>
	<!-- 引入babel,用于将jsx转为js -->
	<script type="text/javascript" src="./babel.min.js"></script>

	<script type="text/babel">
		//1. 创建函数式组件
		function MyComponent(){
			return <h2>我是函数式组件</h2>
		}
		//2. 渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
	</script>
</body>
</html>

  我们先创建一个盒子,用 id 进行唯一标识:

<div id="demo"></div>    

  引入 react 依赖库,接着在 script 中先 创建一个函数式组件

//1. 创建函数式组件
function MyComponent(){
	return <h2>我是函数式组件</h2>
}

  然后 渲染组件到页面

//2. 渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('demo'))

  来分析一下,在执行了 ReactDOM.render(<MyComponent/>,...) 之后,react 做了哪些事情呢:

  • (1) react 先解析组件标签 id ==> demo,通过标签 找到了 MyComponent 组件;
  • (2) react 发现组件是函数定义的,接着 调用 这个函数;
  • (3) react 将函数返回的 虚拟 DOM 转换为 真实DOM;
  • (4) 最后呈现在页面中;

2. 类式组件

  类式组件是基于使用 class 定义的类,需要继承自 React.Component;另外,类式组件中必须实现 render函数。来看个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React类式组件</title>
</head>
<body>
	<div id="demo"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="./react.development.js"></script>
	<!-- 引入react-dom,用于支持react操作DOM -->
	<script type="text/javascript" src="./react-dom.development.js"></script>
	<!-- 引入babel,用于将jsx转为js -->
	<script type="text/javascript" src="./babel.min.js"></script>

	<script type="text/babel">
		//1. 创建类式组件
		class MyComponent extends React.Component {
			render(){
				return <h2>我是类式组件</h2>
			}
		}
		//2. 渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
	</script>
</body>
</html>

  同样,我们先创建一个盒子,用 id 进行唯一标识:

<div id="demo"></div>    

  引入 react 依赖库,接着在 script创建一个类式组件

//1. 创建类式组件
class MyComponent extends React.Component {
	render(){
		return <h2>我是类式组件</h2>
	}
}

  然后 渲染组件到页面

//2. 渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('demo'))

  不难发现,类式组件 和 函数式组件 不同的地方就是在创建组件的地方,而在渲染的时候则是一样。同样来来分析一下,在执行了 ReactDOM.render(<MyComponent/>,...) 之后,react 做了哪些事情呢:

  • (1) react 先解析组件标签 id ==> function,通过标签 找到了 MyComponent 组件;
  • (2) react 发现组件是用类定义的,接着 new 一个该类的实例;
  • (3) react 通过该实例 调用 到类原型上的 render 方法;
  • (3) react 将 render 返回的 虚拟 DOM 转换为 真实DOM;
  • (4) 最后呈现在页面中;

  好了,以上分享了 React 函数式组件 和 类式组件。希望我的分享能对你的学习有一点帮助。

  好了,以上分享了 DOM 树的概念。希望我的分享能对你的学习有一点帮助。

 【公众号传送】

《极智开发 | React 函数式组件 和 类式组件》

极智开发 | React 函数式组件 和 类式组件