1.reactadmin？
2.打包React组件，码依并发布到NPM上
3.Expo 搭建 React-native 项目代码目录分析
4.react事件机制底层原理
5.React 弹窗组件用的码依 createPortal 是怎么实现的？
6.源码级解析，搞懂 React 动态加载（下） —— @loadable/component

reactadmin？

       开箱即用的码依React前端框架——ReactAdmin

       ReactAdmin是一个Github上免费开源的前端框架（不是组件库，也不是码依模板，它是码依一个框架），采用es6、码依源码杯征文视频React和MaterialDesign构建基于Rest/GraphQlAPI的码依Web应用程序。在React上star数超过8k。码依

       ReactAdmin不是码依个UI组件库，它是码依一个前端框架，因此你基本上基本上只要按照官网的码依文档进行一些配置等然后在其基础上开发自己的应用程序即可，可谓开箱即用，码依意识就是码依都给你集成好了。

       你可以直接使用以下命令进行安装（这是码依安装react-admin及所有的依赖）

       下面我们看一下官网提供的一个最简单的示例，你可以在它的码依主仓库中获取

       我们进入到simple中，大致看一下代码和目录结构

       我们安装一些依赖然后启动

       成功后打开浏览器，这是使用react-admin最简单的一个例子

       一图了解

       由于ReactAdmin是一个非常复杂的框架，你可以参考提供的文档，我这里就不详细介绍了，感兴趣的可以直接看文档，文档是英文的，所有的说明都在文档中。

       ReactAdmin它是一个集合，它将一些前端开发所需要的东西都集成了进来，然后做好，我们直接使用即可，不仅仅适合个人学习，也适合通过它来构建企业级的应用。我们不仅仅是拿过来直接用，我们可看一看别人是怎么实现这样的一个框架的，从源码去学习会更快的提升自己的水平，希望对你有所帮助！

       react-admin一款基于reactjs后台解决方案

       使用ES6，React和MaterialDesign在REST/GraphQLAPI之上构建在浏览器中运行的管理应用程序的一款前端框架。Githubstar8.7K+，MIT协议。由marmelab开源和维护。marmelab还有一款非常热门的angularjs后台解决方案ng-admin基于angularjs感兴趣的同学可以去了解下。react-admin官网示例截图如下：

       该Resource组件是感应道闸源码一个配置组件，它允许以限定子组件对于每个管理视图的：list，edit，和create。这些组件使用MaterialUI和react-admin中的自定义组件：

antdesign表格标题下面还有子标题

       一、如图展示表格如何展示下方嵌套的deptName

       在这里插入描述

       官网在这里插入描述

       二、解决方案

       Columnalign="center"title="部门"dataIndex={ ["dept","deptName"]}/

       1

       1

       技术交流分享/面试总结

       微信名片

       打开CSDNAPP，看更多技术内容

       最新发布保姆级教程：AntDesignVue中a-table嵌套子表格

       AntDesignVue中a-table嵌套子表格及只打开一个嵌套表格的方法

       继续访问

       Antd(Ant-design)，嵌套子表格（expandedRowRender）的异步获取数据

       使用阿里的ant-design开源框架，要在表格里面嵌套子表格，需要在用户点击父表格的一行数据后，获取该行的key，然后去异步请求后台的数据用来填充子表格的内容。如果这样写（省略无关代码）：expandedRowRender=(record)={ dispatch({ type:'flow/getPlanList',payload:{ contractId:record.contract_id,//该参数...

       继续访问

       react-antdesigntable表格多级可编辑表格

       antd-react3X版本多级可编辑table

       继续访问

       react.jsant-design中table树结构三级嵌套时逻辑问题

       实现三级嵌套树结构时，勾选三级里的子节点时候父节点也会自动勾选，当子节点大于一项时候取消勾选某一子结构时父节点不变；当子节点只有一项时父节点也会自动取消勾选importStandardTablePagefrom'@/components/StandardTablePage';//用户选中某一行userSelect(record,selected,selectedRows,nativeEvent){ let{ selectedRowKeys}=this.st.

       继续访问

       Reactantd的table表格之嵌套表格

       Reactantd的table表格之嵌套表格最近做了几个pc端的后台管理需求，涉及了table中的嵌套表格，嵌套的子表格大体分为两种效果：效果1-----点击展开新的子表格，旧的子表格关闭效果2-----可同时展开多个子表格效果1：嵌套表格，实现点击展开按钮，展开子表格请求接口数据，点击新的子表格收起原来的子表格效果//设置一个State用来储存展开的行，控制属性const[expandedRowKeys,setExpandedRowKeys]=useStateanygt

       继续访问

       vue嵌套表格组件_支持嵌套对象、多级数组的Vue动态多级表单组件——vue-dynamic-form-component...

       方便不想看完全篇文章的童鞋，简单总结一下，这是篇软广，主要是推广自己在业务中沉淀的一个开源组件vue-dynamic-form-component。基于element-ui实现的vue组件，只需编写类似async-validator的规则，自动生成对应的表单，支持常见输入类型的同时，支持嵌套对象、hashmap、多维数组等复杂类型。有需要的童鞋欢迎使用和贡献代码，顺便给个star(我...

       继续访问

       antdtable嵌套子表格后端动态获取数据rudex写法示例

       有一个需求是可以使主表格里每一栏数据展开，在子table里显示与其相关的子数据项，展开的时候去向后台请求数据显示。用的搭建独立ip源码组件库是Antd。首先我们看Antd官方文档的Table有嵌套子表格的功能，可见我们需要使用expandedRowRender参数，但是尝试在expandedRowRender函数中进行请求，会发现发出了连续的请求，所以我们把请求写在onExpand中，只在点击展开图表的时候发出一次。之后我们写onExpand函数，注意这里的参数要写上expanded，代表是展开还是合并，我之前

       继续访问

       React-Antd-表格-嵌套子表格

       文档地址:链接.import{ Table,Badge,Menu,Dropdown,Space}from"antd";import{ DownOutlined}from"@ant-design/icons";import{ useEffect,useState}from"react";exportdefaultfunctionApp(){ constcolumns=[//定义外层表格头数据{ title:"姓名",dataInde

       继续访问

       ReactantdTable实现单元格点击表头斜线分组等功能

       reactantd单元格添加点击事件自定义单元格

       继续访问

       进阶Ant-Design-Vue你知道table多级表头嵌套展开写法吗？

       前言：在Ant-Design-Vue的前端项目中，我们会经常处理表格，表单这些组件元素，熟练运用并知道它们在使用过程中的联系与区别，这是一个前端必不可少的哟。本文我旨在解决两个问题：（1）如何便于更好的嵌套多级表头（2）如何通过a-checkbox控制全选，单选显示a-table对应的列元素类似于ElementUI,Ant-Design-vue中有很多相似点，但又不完全苟同，有很多自己独有的写法和思想。相信很多人都是先入手ElementUI,再入手Ant,这其实是对开发者比较友好的方式，如果

       继续访问

       前端面试题（react）

       性能优化分为2个方面setState是修改其中的部分状态，相当于Object.assign，只是覆盖，不会减少原来的状态；replaceState是完全替换原来的状态，相当于赋值，将原来的state替换为另一个对象，如果新状态属性减少，那么state中就没有这个状态了接收旧的state和action，返回新的state受控组件就是可以被react状态控制的组件在react中，Inputtextarea等组件默认是非受控组件（输入框内部的值是用户控制，和React无关）

       继续访问

       Antd表格设置表头分组实现可编辑行

       主要通过onCell方法修改children中cloumn的属性。

       继续访问

       antd能自适应吗_admin-antd-react是一个后台前端解决方案，它基于React、AntDesign和UmiJs实现。...

       admin-antd-react是一个后台前端解决方案，它基于React、AntDesign和UmiJs实现。--::?阅读次#介绍[admin-antd-react]()是一个后台前端解决方案，它基于[React](...

       继续访问

       react-antd-Table相似表格不同字段处理

       1、racUI绑定源码分析当两个表格字段相似时，但有一两个字段不同，我们可以将不同的字段单独以对象的形式抽出，根据情况push进去即可。2、代码参考constchange={ title:'操作',dataIndex:'operate',key:'operate',width:'%',align:'center',render:(text,record)={

       继续访问

       React中控制AntDesignTable列的显示与隐藏

       React中控制AntDesignTable列的显示与隐藏

       继续访问

       热门推荐使用antd中Table组件某一列有多个变量值需要写入

       当某一列需要有多个变量值写入时，我们就不可以再用dataIndex来定义一个ID，具体解决方案将在文中给出。

       继续访问

       reactant-designtable显示数据以及上传数据显示到另一列中

       需求是：用table展示数据，并在每一行的最后一列中给一个上传附件的按钮，可上传多个附件，上传之后在另一列去显示数据，可以删除附件因为有别的组件用到columns，他不需要上传附件功能，我就把columns的公共部分提出去了，在这个组件需要的时候在push到column中。columns如下：/***处理上传附件列*/handleColumn=()={ letcArr=this.state.columns;

       继续访问

       antd表单一个label下多个内容

       1.如何实现一个label旁并排多项内容比如这样，在other的label下，既有输入文本域，又有toggle开关。同时两者有序地并排在右侧，同一行。方法是再用一层Form.Item分别包裹右侧内容，并且设置noStyle属性示例代码：Form.Itemlabel="DateofBirth:"Form.Itemname="birthDate"noStyle

       继续访问

       React针对antDesignselect组件进行二次封装

       React针对antDesign库select组件进行二次封装由于业务需要对select进行样式上的修改，部分select还需要使用原样式。这种情况可以通过两种方式来实现：1通过className进行样式覆盖2通过二次封装组件，相对于仅修改css样式来说更加的灵活本次介绍第二种方式对组件进行二次封装/**@Date/5/8*@Authorzuolinya*@Descriptionantdselect组件二次封装*1设置为圆角*/import

       继续访问

       React基于AntdDesign的RadioGroup按钮组控件封装

开源Vue后端UI开箱即用解决方案——vuestic-admin

       这是一个Vue的后端开箱即用UI项目框架，和之前的ReactAdmin类似，它是一个框架，也就意味着它帮你完成了很多公用的部分，你只需要在其基础上进行自己的项目扩展即可。大体上这是由Vue和bootstrap4构建的，其中还集成了很多其他的东西。

       如果你使用yarn你也可以使用它安装

       在安装好vuestic后，你就可以使用它进行项目创建了

       创建好后大致看一下目录结构（可能不清晰，你可以直接搭建体验）

       成功后打开localhost:

       如果你想详细的学习，你可以查看官网文档

       浏览器兼容性，很遗憾只支持到IE+和主流的强庄主图源码Chrome、FireFox、Safari、Edge等

       目前有很多开箱即用的解决方案，还有一些仅仅是UI模板，每个解决方案都有各自的优势，我们尽可能的减少不必要的开发时间浪费，在通用的基础上在扩展，最主要的还是学习看源码，希望对大家有所帮助，谢谢！

react中实现登录鉴权

       vue中会使用导航守卫判断token，

       react中使用redirect方式

       使用高阶组件定义PrivateRoute导出

       在router中用

PrivateRoute?path="/admin/roles"?exactcomponent={ Roles}/PrivateRoute

       的方式判断需要token的路由

       import?React,?{ ?Component?}?from?'react'

       import?{ Redirect,?Route}?from?'react-router-dom'

       function?PrivateRoute({ ?component:Children,?...rest?})?{

       return?(

       Route

       { ...rest}

       render={ ()?={

       let?token?=localStorage.getItem('token')

       if(token){

       returnChildren/

       }else{

       return?Redirect

       to={

       '/login'

       }/

       }

       }

       }

       /

       );

       }

       export?default?PrivateRoute

打包React组件，并发布到NPM上

       在本文中，我将分享如何将一个基于 TypeScript 和 React 构建的组件 DataZoomControl 包装和发布至 NPM 库的过程。此组件旨在用于未来项目的复用，因此在将代码打包和上传至 NPM 之前，我需要先进行一些准备工作。

       为了确保发布的版本与项目源码配置有所不同，我决定在现有项目分支上创建一个新的分支，命名为 publish，以保存发布版本的代码和配置。同时，对项目结构进行相应调整，以适应发布至 NPM 的需求。

       在打包工具的选择上，我选择了 umijs/father，这是一款适合 React 应用的高性能打包工具，能够帮助我更有效地构建和优化代码。

       在进行代码打包的过程中，我遵循了官方文档的指导，确保所有依赖和配置均正确无误，以确保发布的组件能够顺利在其他项目中使用。

       在准备就绪后，我将组件打包，并通过 NPM 发布至公有仓库，供其他开发者使用。这一过程涉及创建和更新 NPM 包的元数据，以及确保代码质量符合 NPM 的发布标准。

       最后，发布组件至 NPM 是一个提升代码可复用性和社区共享价值的过程。通过遵循最佳实践和标准，我们可以为开发者社区提供一个高效、可靠的组件，从而促进技术的持续发展和创新。

       总的来说，将 React 组件打包和发布至 NPM 是一个涉及前期准备、选择合适的打包工具、进行代码优化、发布至公有仓库以及确保质量控制的过程。这一过程不仅有助于实现代码的复用，还能推动开发者社区的技术交流与合作。

Expo 搭建 React-native 项目代码目录分析

       创建React-native项目时，Expo提供了多种工具简化开发过程。根据项目需求，选择不同的模板：空白模板（blank）适合演示、组件预览和个人项目；带有底部tab菜单的模板（tabs）；需要直接控制原生代码时选择（minimal）；遇到未知问题则选择RN方式。[1]

       React Native的典型目录结构包括以下几个部分：[2]

       src：存放组件源代码，是项目开发的核心目录。

       test：用于编写和运行组件的测试用例。

       demo：包含一个独立的Expo项目，App.js是核心文件，通过引用src中的组件进行展示和开发。

       其他文件如.eslintrc.js, babel.config.js, README.md, .gitignore, package.json等，分别负责代码风格规范、编译配置、项目介绍和版本管理。

       引入Expo时，需注意src目录与demo目录的配置协调，以确保metro（打包工具）能够正确处理。首先安装Expo CLI，然后创建项目，通过yarn start预览组件。配置metro时，重点在于新版本的metro.config.js，用于添加providesModuleNodeModules，解决src目录依赖的解析问题。[3]

       总结起来，开发过程中App.js是关键，负责组件的集成和展示。app.json和package.json分别用于设置应用配置和依赖管理。assets存放资源文件，babel.config.js用于代码转换，index.js是应用入口，metro.config.js负责项目打包，而yarn.lock则保证了依赖版本的一致性。eas.json则提供了EAS平台的云构建和部署选项。每个文件都有其特定的功能，共同构建React-native项目的开发流程。[4]

react事件机制底层原理

       阅读须知1.采用react版本为v..2细节可能有所出入，但是原理都是一样的。2.请通过无痕模式调试否则插件容易干扰我们的调试。一、一个demo引发的问题

       constApp=()=>{ return<inputonChange={ ()=>{ console.log('这是一个onChang额事件')}}/>}

       这是一个平淡无奇的最简单demo，我们看到在input元素绑定onChange事件，当我们定位到这个dom元素的时候发现react为我们添加了input、keydown、blur、change等等事件，而且这些事件都是绑定到document上，并没有绑定到我们的input元素中。那么react究竟做了什么处理呢。

二、react事件是怎么被绑定的

       首先我们要明白，react中的事件不是原生事件是合成事件，如何合成的呢，我们debugger源码就知道了。当我们打断点调试的时候首先会出来这些东西，首先我们看到这个函数，在react-dom的第一次运行的时候会出现这个。其主要作用初始化一些事件的插件我们拿ChangeEventPlugin来简单的说一下里面主要是用来干什么的吧。

varChangeEventPlugin={ eventTypes:{ change:{ phasedRegistrationNames:{ bubbled:'onChange',captured:'onChangeCapture'},dependencies:[TOP_BLUR,TOP_CHANGE,TOP_CLICK,TOP_FOCUS,TOP_INPUT,TOP_KEY_DOWN,TOP_KEY_UP,TOP_SELECTION_CHANGE]}},_isInputEventSupported:isInputEventSupported,extractEvents:function(topLevelType,targetInst,nativeEvent,nativeEventTarget,eventSystemFlags){ vartargetNode=targetInst?getNodeFromInstance$1(targetInst):window;vargetTargetInstFunc,handleEventFunc;if(shouldUseChangeEvent(targetNode)){ getTargetInstFunc=getTargetInstForChangeEvent;}elseif(isTextInputElement(targetNode)){ if(isInputEventSupported){ getTargetInstFunc=getTargetInstForInputOrChangeEvent;}else{ getTargetInstFunc=getTargetInstForInputEventPolyfill;handleEventFunc=handleEventsForInputEventPolyfill;}}elseif(shouldUseClickEvent(targetNode)){ getTargetInstFunc=getTargetInstForClickEvent;}if(getTargetInstFunc){ varinst=getTargetInstFunc(topLevelType,targetInst);if(inst){ varevent=createAndAccumulateChangeEvent(inst,nativeEvent,nativeEventTarget);returnevent;}}if(handleEventFunc){ handleEventFunc(topLevelType,targetNode,targetInst);}//Whenblurring,setthevalueattributefornumberinputsif(topLevelType===TOP_BLUR){ handleControlledInputBlur(targetNode);}}}

       其中dependencies属性主要是告诉我们change事件是依赖于它下面的一些事件来合成的。而phasedRegistrationNames是在冒泡或者捕获两个阶段做的一些处理，react会在不同阶段调用不同的处理方法。所以初始化完成之后他们的结构是这样的会形成registrationNameModules与registrationNameDependencies这两个对象如下图所示

       形成这两个对象是在diff过程更好的对事件进行处理。

       registrationNameModules主要是在diff过程中如果检测到fiber上存在像onClick这些方法就会调用这些插件进行处理。

       判断合成事件依赖于那些事件然后调用registrationNameDependencies对应的事件所依赖的原生事件进行绑定。绑定到了document上。

       到现在为止我们的react事件绑定完成了并且绑定到了document对象上。

三、react事件如何触发的

       因为我们在document上绑定了事件，当我们点击的时候肯定知道是哪一个元素触发了这个事件，但是还有一个问题就是我们怎么找到我们在代码写的事件处理函数，因为我们的事件处理函数最后被react初始化到了对应的fiber对象中了所以如何通过dom元素找到其对应的fiber对象，这个就是我们需要探讨的。

       这个就是react如何找到对应的fiber对象，是这样的，其中原生dom与其对应的fiber对象中存在一个指向问题，原生dom通过里面一个唯一key指向dom对应的fiber，而fiber中stateNode对应的也是该原生dom对象。所以我们就可以找到了我们写在react中的处理函数。即原生dom->fiber->memoizedProps这里面其实就是冒泡时候先寻找父组件如果父组件有这个事件就加到event._dispatchListeners上，然后遍历这个数组拿到回调然后触发事件为啥用e.preventDefault()?和?returnfalse阻止不了事件，就是这个原因。

       好了，我们的react事件绑定机制讲完了，如果有什么意见或者建议请评论告诉我。。

原文：/post/

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

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

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

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

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

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

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

源码级解析，搞懂 React 动态加载（下） —— @loadable/component

       源码级解析，探索 React 动态加载的实现与特性

       本系列文章旨在深入探讨单页应用（SPA）技术栈，重点关注动态加载方案的实现原理。上篇中，我们已介绍了 react-loadable 和 React.lazy，其中后者几乎已覆盖所有使用场景，并在 React 版本中添加了 SSR 支持。今天，我们将聚焦于一款名为 @loadable/component 的新方案，探索其在动态加载领域的独特优势与实现机制。

       根据官方说明，@loadable/component 不仅支持动态加载组件，还扩展了 prefetch、library 分割等特性，并提供简洁的 API。它允许用户在不依赖其他高阶组件的情况下，直接动态加载组件或库。

       为了直观理解动态加载的实现原理，我们先从具体例子入手。通过改造开头的例子，我们展示了如何使用 @loadable/component 实现组件动态加载。

       接下来，我们将深入探讨动态加载组件与库之间的区别，以及如何利用 loadable 和 loadable.lib 函数实现动态加载。通过分析源码，我们发现核心逻辑在于使用 createLoadable 工厂方法，该方法根据不同的加载方式（loadable 和 lazy）生成高阶组件 Loadable。

       分析 loadable 和 lazy 的实现区别后，我们发现它们在加载模块时的流程相似，但在加载组件时有所差异。动态加载的 ref 属性转发机制也是动态加载组件与库的重要特性之一，通过分析 Loadable 组件内部的实现细节，我们揭示了 ref 属性的指向原理。

       在服务端渲染场景下，@loadable/component 的动态加载机制与客户端有所不同，主要通过同步加载动态组件/库来确保渲染过程的流畅性。通过构造函数中的同步加载操作，我们实现了服务端与浏览器端的加载一致，进而保证了渲染时可以获取到动态资源。

       总结对比不同动态加载方案，React.lazy + Suspense 提供了强大的异步渲染控制能力，而 react-loadable 和 @loadable/component 则通过高阶组件的形式，实现了组件与库的动态加载。在选择动态加载方案时，应根据项目需求和具体场景进行评估，考虑到不同的特性和限制。