经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » React » 查看文章
React?函数式组件和类式组件详情
来源:jb51  时间:2022/8/2 16:46:22  对本文有异议

前言

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

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

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

1. 函数式组件

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>React函数式组件</title>
  8. </head>
  9. <body>
  10. <div id="demo"></div>
  11. <!-- 引入react核心库 -->
  12. <script type="text/javascript" src="./react.development.js"></script>
  13. <!-- 引入react-dom,用于支持react操作DOM -->
  14. <script type="text/javascript" src="./react-dom.development.js"></script>
  15. <!-- 引入babel,用于将jsx转为js -->
  16. <script type="text/javascript" src="./babel.min.js"></script>
  17.  
  18. <script type="text/babel">
  19. //1. 创建函数式组件
  20. function MyComponent(){
  21. return <h2>我是函数式组件</h2>
  22. }
  23. //2. 渲染组件到页面
  24. ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
  25. </script>
  26. </body>
  27. </html>

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

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

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

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

然后 渲染组件到页面

  1. //2. 渲染组件到页面
  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函数

来看个例子:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>React类式组件</title>
  8. </head>
  9. <body>
  10. <div id="demo"></div>
  11. <!-- 引入react核心库 -->
  12. <script type="text/javascript" src="./react.development.js"></script>
  13. <!-- 引入react-dom,用于支持react操作DOM -->
  14. <script type="text/javascript" src="./react-dom.development.js"></script>
  15. <!-- 引入babel,用于将jsx转为js -->
  16. <script type="text/javascript" src="./babel.min.js"></script>
  17.  
  18. <script type="text/babel">
  19. //1. 创建类式组件
  20. class MyComponent extends React.Component {
  21. render(){
  22. return <h2>我是类式组件</h2>
  23. }
  24. }
  25. //2. 渲染组件到页面
  26. ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
  27. </script>
  28. </body>
  29. </html>

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

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

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

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

然后 渲染组件到页面

  1. //2. 渲染组件到页面
  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 组件内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号