React 函数式组件和类式组件详情

更新时间：2022年08月02日 14:09:23 作者：极智视界

这篇文章主要介绍了React函数式组件和类式组件详情，React是组件化的的JS库，组件化也是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 函数式组件和类式组件详情的文章就介绍到这了,更多相关React 组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React函数组件useContext useReducer自定义hooks
这篇文章主要为大家介绍了React函数组件useContext useReducer自定义hooks示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
React函数组件传参的实现
React函数组件通过接受props实现组件间的数据传递,通过组件标签的属性向子组件传递数据,并在子组件中通过参数接收,还可以使用ES6的解构赋值,函数也能作为props传递,以实现父子组件间的交互和通信,下面就来具体了解一下
2024-09-09
解决react antd Table组件使用radio单选框更新选中数据不渲染问题
这篇文章主要介绍了解决react antd Table组件使用radio单选框更新选中数据不渲染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
在React 组件中使用Echarts的示例代码
本篇文章主要介绍了在React 组件中使用Echarts的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
React 自动聚焦字段使用详解
这篇文章主要为大家介绍了React 自动聚焦字段使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
详解如何用webpack4从零开始构建react开发环境
这篇文章主要介绍了详解如何用webpack4从零开始构建react开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
React中引用CSS方式及写法大全(三种方式)
在React中引用CSS的方法有多种,可以根据个人的喜好和项目的需求来选择，本文主要介绍了React中引用CSS方式及写法大全，感兴趣的可以了解一下
2023-10-10
React Native 真机断点调试+跨域资源加载出错问题的解决方法
下面小编就为大家分享一篇React Native 真机断点调试+跨域资源加载出错问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
react-router实现按需加载
本篇文章主要介绍了react-router实现按需加载，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
ES6 class类链式继承，实例化及react super(props)原理详解
这篇文章主要介绍了ES6 class类链式继承，实例化及react super(props)原理,结合实例形式详细分析了ES6 中class类链式继承，实例化及react super(props)原理相关概念、原理、定义与使用技巧,需要的朋友可以参考下
2020-02-02

React 函数式组件和类式组件详情

目录

前言

1. 函数式组件

2. 类式组件

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具