皮皮网

1.一看就会的超实用小组件之LoadingButton
2.React 弹窗组件用的 createPortal 是怎么实现的？
3.antd中如何t置？
4.前端学习——Ant Design

一看就会的超实用小组件之LoadingButton

       ç»„件背景

       åœ¨å¹³æ—¶çš„工作中，经常会遇到一个场景：

       ç‚¹å‡»æŒ‰é’®æ—¶è¯·æ±‚一些接口数据，而为了避免用户重复的点击我们通常会为这些按钮添加loading。这个添加loading的功能本身时非常简单的，只要我们定义一个变量使用在Button组件中即可，但在做后台管理类项目时，这样的按钮可能会有非常非常多，可能一个组件中，很多变量都是xxx_loading，耗时耗力又不够优雅。接下来，我们对Button组件做一个简单的封装来解决这个耗时耗力又不够优雅的loading问题

灵感来源

       æˆ‘们在使用Antd的Modal对话框时，当我们的onOk为异步函数时，此时Modal的确定按钮会自动添加loading效果，在函数执行完成后关闭弹窗，就像这样：此时，代码如下：

asyncFunc(){ returnnewPromise(resolve=>{ setTimeout(()=>{ resolve()},)})},handleTestModal(){ constthat=thisthis.$confirm({ title:'测试异步函数',content:'异步函数延迟两秒结束',asynconOk(){ awaitthat.asyncFunc()}})},

       çœ‹åˆ°è¿™ç§æ•ˆæžœåŽï¼Œå°±æƒ³åˆ°ï¼Œå¦‚果可以封装一个Button组件，将需要执行的函数传入，组件中自动根据函数执行情况添加loading效果岂不是非常的方便。

实现LoadingButton定义组件参数

       è¿™è¾¹å°±å®šä¹‰å‡ ä¸ªå¤§å®¶ä¼šå¸¸ç”¨åˆ°çš„参数：text(按钮文字)、type(按钮类型)、asyncFunc(按钮点击时执行的异步函数)、delay(loading延迟)，另外，还需要一个组件内部的loading变量来控制我们Button组件的状态，代码如下：

exportdefault{ data(){ return{ loading:false}},props:{ text:{ type:String,default:'确定'},type:{ type:String,default:'primary'},delay:{ type:Number,default:0},asyncFunc:{ type:Function,default:()=>{ }}},}使用antd中的Button组件进行二次封装

       åœ¨æˆ‘们的自定义LoadingButton组件中，将上面定义的参数使用起来，并绑定一个click事件，代码如下：

<template><Button:type="type":loading="loading"@click="handleClick">{ { text}}</Button></template><script>import{ Button}from'ant-design-vue'exportdefault{ components:{ Button},methods:{ handleClick(){ }}}</script>判断异步函数asyncFunc

       è¿™ä¸€éƒ¨åˆ†ä¸ºæ•´ä¸ªç»„件最重要的一个部分，即我们如何去判断传入的函数是异步函数，当我们传入的asyncFunc函数是异步函数时，组件才需要添加loading的动画，那么我们应该如何去判断一个函数是否为异步函数呢？

参考antd是如何实现的？

       ä¸Šé¢æˆ‘们刚介绍了antd的Modal对话框中有类似的逻辑，那么不妨去阅读一下这部分相关的源码，看下antd的实现方式：

//components/modal/ActionButton.jsxonClick(){ const{ actionFn,closeModal}=this;if(actionFn){ letret;if(actionFn.length){ ret=actionFn(closeModal);}else{ ret=actionFn();if(!ret){ closeModal();}}if(ret&&ret.then){ this.setState({ loading:true});ret.then((...args)=>{ //It'sunnecessarytosetloading=false,fortheModalwillbeunmountedafterclose.//this.setState({ loading:false});closeModal(...args);},e=>{ //Emiterrorwhencatchpromisereject//eslint-disable-next-lineno-consoleconsole.error(e);//See:/post/

React 弹窗组件用的 createPortal 是怎么实现的？

       React 中弹窗组件的实现，往往依赖于 createPortal 这个 API。它能够将组件渲染到文档的任意位置，比如 antd 的 Modal 组件通常会直接挂在 body 下面。让我们通过源码分析来揭示这个功能的工作原理。

       首先，网页前端html源码React 的组件渲染过程包含 render（创建虚拟DOM）和 commit（实际更新DOM）两个阶段。当我们在jsx中定义弹窗组件时，React 会将其编译成 render function，生成的 React Element 是虚拟DOM的核心表示。

       接下来，createPortal 函数的介入就显得尤为重要。当调用这个函数时，它会返回一个特殊的 React Element，类型为 REACT_PORTAL_TYPE。AI混剪源码这个元素内部保存了容器信息（containerInfo），它是后续将组件挂载到指定位置的关键。

       在 reconciliation 阶段，这个 REACT_PORTAL_TYPE 的 React Element 会转换成对应的 fiber 节点，并将 containerInfo 存储在 fiber.stateNode 中。这个操作允许React根据不同类型的 fiber 节点管理它们的私有数据，如状态信息。

       到了 commit 阶段，React 会遍历 fiber 树并执行DOM操作。在处理 portal 的 fiber 节点时，它会调用插入或追加的方法，将组件实际插入到 body 中，从而实现了我们看到的弹窗组件直接挂载到文档主体的效果。

       总结来说，marlin源码流程分析createPortal 的使用使得React能够灵活地将组件渲染到任何指定位置，整个过程涉及到 render、reconciliation 和 commit 的协同工作，最终实现了弹窗组件的动态显示效果。

antd中如何t置？

       在Ant Design中，Modal组件的标题展示方式非常灵活。默认情况下，你可以直接使用字符串作为标题，如``。然而，如果你想实现更精细的定制，比如使用自定义组件，antd同样提供了支持。你可以通过将`title`属性设置为`ReactNode`类型，转转源码怎么用如下面的代码所示：

       自定义标题

       在这里，`CustomTitle`是一个自定义的React组件，它包裹了你需要显示的标题内容。通过这种方式，你可以完全控制标题的样式和功能，使其符合你的项目需求。所以，要设置antd的Modal标题，只需要将`title`属性替换为你想要的React元素即可。

前端学习——Ant Design

       本文基于Ant Design官网内容进行编写，旨在简要介绍个人认为需要了解的部分。若想了解更多详细信息，请查阅官方文档。

       Antd，人脉引流平台源码全称为Ant Design，是蚂蚁集团推出的企业级产品设计体系。它的设计理念围绕「自然」、「确定性」、「意义感」、「生长性」四大核心价值观，通过模块化的解决方案，旨在降低开发成本，让设计者专注于提升用户体验。

       Antd的安装可以通过yarn或npm命令轻松完成。

       Antd的使用涉及到引入组件，包括按钮、图标、文本样式、栅格系统等，为开发者提供了一套完整的组件库。

       Antd组件详解

       Button按钮：Antd提供了丰富的按钮样式和功能，支持自定义大小、颜色、形状等属性。

       Icon图标：Antd图标组件提供了一系列语义化的矢量图形，易于集成到按钮或其他组件中，以增强视觉效果和交互体验。

       文本样式：Antd提供了一系列文本样式，支持字体大小、颜色、对齐方式等调整，满足不同场景的需求。

       Grid栅格：栅格系统是Antd布局的核心，基于Flex布局，灵活地定义元素在页面中的位置和大小，支持响应式设计，实现自适应屏幕大小。

       Grid栅格详细功能

       栅格系统提供基础栅格、区块间隔、列偏移、列排序等功能，支持多种排列方式和对齐方式，包括水平对齐、垂直对齐、子元素排列顺序等。

       栅格系统支持自定义间隔，推荐使用（+8的倍数）px作为栅格间隔，以实现美观的布局效果。

       其他组件

       Antd还包括Select、Radio、Checkbox、Switch、Cascader、DatePicker、TimePicker、Input、Tabs、Table、List、Alert、Modal、Form等组件，覆盖了表单、时间选择、输入、列表展示、警告提示、对话框、高级表单管理等场景。

       每个组件都设计为高性能、易用的解决方案，旨在简化前端开发流程，提高开发效率。

       通过学习Antd组件，前端开发者可以构建出结构清晰、功能丰富的应用界面，显著提升用户体验和工作效率。