react-静态组件，动态组件

于 2024-04-09 22:28:52 发布
阅读量488 收藏 1
点赞数 6
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingzi0001/article/details/137570350
版权

react09- 组件

静态组件 动态组件

静态组件： 函数组件，在第一次渲染完成后，组件中的内容，不会根据组件内的某些操作再次进行更新，页面并不会跟着改变在这里插入图片描述
在这里插入图片描述

过程： 第一次渲染时，执行函数方法，产生一个私有作用域（上下文） ， 解析props并传入，但是冻结的，渲染函数返回的jsx元素（虚拟dom） ； 组件中元素绑定的方法是组件内的私有方法，修改的变量也是私有变量

但是开发中大多数都是要基于组件内的某些操作，让组件跟新以此呈现出不同的效果： 轮播图，选项卡等 ====> 函数组件，Hooks组件（函数组件中，使用Hooks组件，这是目前开发中用的最多的）

动态组件 ：类组件

创建： 要求创建一个类，并必须继承 React.Component / PureComponent 这两个类中的一个在这里插入图片描述

梳理一下，react中在渲染类组件的时候的处理过程在这里插入图片描述

es6 class

在这里插入图片描述

有一篇render方法的执行机制没整理，记得补一下

迃-幵
关注
  • 6
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React动态组件 评论管理
qq_27324469的博客
08-11 298
React动态组件 评论管理 #笔记 ###编写应用的步骤 ####1组件拆分 ####2编写静态组件 ####3写动态组件 分析动态数据有多少组件使用，应写在父组件中，同一个数据有多个地方改变要写成对象 子组件接收数据之前声明接收数据的属性 npm intstall --save prop-types//下载包 import PropTypes from "prop-types"//导包 //在CommentList子组件中接收数组类型数据comments CommentList.propT
React动态添加标签组件
测试游记
08-31 1298
背景在前端开发的过程中,一些表单的输入经常需要输入多个内容,如果采用一个输入框+逗号分隔的方式,展示起来不是很清晰,一般需要采用标签的方式需求可以指定空状态时的标题设置标签颜色每个标签的最大长度(字符数)接口传递的时候的分隔标记(是用逗号,还是其他)直接处理表单,不需要二次处理所以需要传入以下内容给该组件title:标题separator:分隔标记maxLength:最大长度color:颜色for...
react动态加载组件
大风起兮云飞扬
09-08 3065
因为使用的import函数，所以需要在babel中引入一个插件。
react-dynamic-fields:动态添加多个输入字段的 ReactJS 组件
06-30
React动态场 动态添加新输入字段的 ReactJS 组件。 入门： 安装： npm install react-dynamic-fields 加载组件： var DynamicFields = require("react-dynamic-fields"); 例子： 在浏览器中打开“sample”文件夹中的“index.html”文件以查看使用示例。
react经验4:动态组件
Comvir的专栏
07-26 1376
在页面的一小块区域切换显示不同的组件
react 动态组件-条件渲染
舍予
08-03 2666
动态组件就是根据数据的变化而切换不同的组件，从而展示不同的内容。
023 react动态加载组件
test253506088的博客
06-15 1800
首先介绍下动态加载函数： require.ensure([], (require)=>{ //.default 是为了使用被引入文件的 default输出项 let A = require('./a.js').default; }) 或者直接： //.default 是为了使用被引入文件的 default输出项 let A = require('./a.js').default; ...
react-signals:React 的信号组件
06-24
React 的信号组件。 演示和示例 现场演示： 要在本地构建示例，请运行： npm install gulp dev 然后在浏览器中打开 。 安装 使用react-signals的最简单方法是从 NPM 安装它并将其包含在你自己的 React 构建过程...
react-chat-elements:React.js聊天元素聊天界面，React聊天组件
05-12
React聊天元素React.js聊天元素安装npm install react-chat-elements --save对于React Native 步骤1：安装react-chat-elements npm install react-chat-elements --save 如果您已经安装了react-native-vector-icons...
react-native-static-server：React Native的HTTP静态文件服务器
02-05
react-native-static-server 一个跨平台组件，用于通过React Native服务静态资产。入门$ npm install react-native-static-server --save 安装从react-native 0.60开始，自动链接将负责链接步骤，但不要忘记运行pod ...
React 创建自定义控件
08-11
一个简单的React使用示例，使用React创建自定义控件
gatsby-plugin-react-helmet-async:与Gatsby一起使用react-helmet-async
03-09
React Helmet Async是一个组件，可让您使用其React组件控制文档头。 使用此插件，您在其组件中添加的属性（例如标题，元属性等）将被添加到Gatsby构建的静态HTML页面中。 这不仅对站点查看者很重要，对SEO也很...
react-google-static-map:适用于React的Google静态地图组件
05-03
适用于React的Google静态地图组件 大多数代码来自 安装 npm install --save react-google-static-map 用法 var GoogleStaticMap = require ( 'react-google-static-map' ) ; class MapExample extends React . ...
React使用条件渲染模拟Vue的动态组件
subsistent的博客
08-16 254
使用场景：当发现点击不同的 tab 页，切换不同的内容信息(标签结构) 时，就可以使用动态组件。动态组件：动态组件就是根据数据的变化而切换不同的组件，从而展示不同的内容。
【项目复盘React】react封装动态组件+组件懒加载(hook版)
Weiqian_的博客
06-19 1104
react封装动态组件+组件懒加载(hook版)
React中如何使用动态组件（Dynamic Component）与JSX
最新发布
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
12-25 1232
React中如何使用动态组件（Dynamic Component）与JSX引言大家好，欢迎来到我的博客！今天我要和大家分享一个有趣又实用的主题——在React中如何使用动态组件（Dynamic Component）与JSX。如果你想为你的应用程序增加一些灵活性和可扩展性，那么动态组件是一个非常好的选择。让我们一起来探索吧！动态组件是什么？动态组件是指在运行时根据条件或参数的不同，选择性地渲染不同的...
【React】无状态组件 容器组件 UI组件
yt627306293的博客
12-17 223
一个组件里东西太多,把负责UI部分,也就是render里的提取出来单独放一个组件,称为UI组件,剩下的部分只有业务逻辑,也叫做逻辑组件,聪明组件或者容器组件 一般如果一个组件里只有render函数,可以写成无状态组件,这样性能更高.因为没有别的生命周期函数 import React,{Fragment}from'react'; import { Input,Button,List } ...
React组件--从创建组件开始手把手教学
Little_Fish_KEKE的博客
02-23 870
React从类组件介绍和创建开始，多种案例搭配，快速学会react的组件使用
react-router-dom v6文档
09-06
引用:react-router-dom是一个用于React应用程序的路由库。它提供了一种管理应用程序中不同页面之间导航的方式。react-router-dom有几个相关的模块，包括react-router-native、react-router-redux和react-router-config等。其中，react-router-native是用于React Native应用程序的绑定，react-router-redux是与Redux结合使用的模块，而react-router-config则是一个用于静态路由配置的助手。 引用:在使用react-router-dom的v6版本时，可以通过使用useRoutes函数来绑定路由配置。在一个App组件中，可以导入routes文件，并在App组件中使用useRoutes函数将路由配置渲染到页面上。 引用:在v6版本中，可以选择使用BrowserRouter或HashRouter来包裹整个应用程序的组件。BrowserRouter和HashRouter的作用都是为了管理地址栏的URL，但BrowserRouter使用的是正常的URL路径，而HashRouter修改的是地址栏的hash值。另外，在v6版本中，可以使用<Routes>和<Route>来进行路由配置，其中<Routes>用于包含多个<Route>组件，每个<Route>对应一个页面。 所以，如果你想了解react-router-dom v6的更多内容，可以参考官方文档或查看相关示例代码。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [react-router:react-router 中文文档](https://download.csdn.net/download/weixin_42166261/18230223)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [react-router-dom V6 中文文档教程总结](https://blog.csdn.net/xm1037782843/article/details/127454966)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [React学习笔记_React Router 6](https://blog.csdn.net/qq_20470063/article/details/123361115)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值