React函数式组件和类式组件的区别有哪些细节需要详细说明？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1492个文字，预计阅读时间需要6分钟。
目录+前言+1. 函数式组件+2. 类式组件+前言+React 是一个组件化的 JavaScript 库，核心思想是组件化。使用 React，可以构建具有自身状态的封装组件，进而组合成复杂的 UI。React 的组件化是其核心思想，也是其构建动态交互式网页的基础。
目录
- 前言
- 1. 函数式组件
- 2. 类式组件
前言
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 组件内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！
本文共计1492个文字，预计阅读时间需要6分钟。
目录+前言+1. 函数式组件+2. 类式组件+前言+React 是一个组件化的 JavaScript 库，核心思想是组件化。使用 React，可以构建具有自身状态的封装组件，进而组合成复杂的 UI。React 的组件化是其核心思想，也是其构建动态交互式网页的基础。
目录
- 前言
- 1. 函数式组件
- 2. 类式组件
前言
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 组件内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！