react

navigation的几个难点和问题： 1.底部tab是否可以加上中间的大按钮？ 如果加上，如何触发事件？ js文件放哪？ 2.navigation的登录注册页面。成功后应该不能返回刚刚的登录页面？清空页面栈？ 3.登录成功跳转到大厅？意图页面？还是当前所在页？弹出model是不是可以解决所有问题？登录成功如何重刷当前页？ 一、前言 在 React Native 中，官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换。 react-navigation 主要包括三个组件： TabNavigator 切换组件 ，用来实现同一个页面上不同界面的切换，即tab选项卡 StackNavigator 导航组件，用于实现各个页面之间的跳转，即页面跳转（通过stack栈记录） DrawerNavigator 抽屉组件，可以实现侧滑的抽屉效果 本次我们主要说说前两个， DrawerNavigator 笔者不曾使用 （一）、怎么使用navigation（入口和概览） export default class Navigator extends Component { 　　render() { 　　　　 return ( 　　　　　　 <Navigator /> 　　　　) 　　} } const Navigator = StackNavigator

本篇配合antdpro的 ProTable实现简单的CRUD操作： 官方网站 更改了ProTable获取数据 改写UpdateForm内容，实现新增用户 更改用户信息 删除用户信息 修改删除需要admin权限处理 效果图 1. 设置自己的tableItem 跟据自己的数据编写Table使用的tableItem类： export interface UserDetails { key : number ; username : string ; avatar : string ; createBy : string ; createTime : Date ; email : string ; frozen : number ; id : number ; lastUpdateBy : string ; lastUpdateTime : Date ; mobile : string ; password : string ; roles : Array < string > ; } 2. 编写columns hideInForm， type="form" 时不显示，使用新增的使用用到 renderText：通过函数设置样式 valueEnum：用来设置枚举分类 option时，render的第二个元素为row内容 const columns : ProColumns <

Kendo UI for jQuery R2 2020 SP1试用版下载 Kendo UI 目前最新提供 Kendo UI for jQuery 、 Kendo UI for Angular 、 Kendo UI Support for React 和 Kendo UI Support for Vue 四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。 组模板 应用分组时，Grid的分组行将数据行组织为树形结构。 有关可运行的示例，请参阅： Demo on using the row template of the Grid Demo on using the detail-row template of the Grid Demo on using the toolbar template of the Grid 组行显示组摘要值，并包含展开和折叠组图标，这些图标使用户可以展开（显示子行）和折叠（隐藏子行）组行。 Grid提供以下模板，可以用于自定义组行的外观： GroupHeaderTemplate - 为整个组行渲染一个模板。 通常主要目的是显示有关整个组的信息，默认情况下如果您未定义模板，那么将显示字段名称和当前组值。 GroupHeaderColumnTemplate - 在与行本身对齐的组行中渲染模板。

React的事件处理使用合成事件(SyntheticEvent)，不是原生事件。 1. 合成事件的异步访问 合适事件为了节约性能，使用对象池。当一个合成事件对象被使用完毕，即调用该对象的同步代码执行完毕，该对象会被再次利用。 其属性会被重置为null。所以异步访问合适事件的属性，是无效的。 解决方法有两种： 1.1 用变量记录事件属性值 用变量记录合成事件的属性值，在异步程序中访问，就没有任何问题了。 function onClick(event) { console.log(event); // => nullified object. console.log(event.type); // => "click" const eventType = event.type; // => "click" setTimeout( function () { console.log(event.type); // => null console.log(eventType); // => "click" }, 0 ); } 1.2 用e.persist()方法 e.persist()方法，会将当前的合成事件对象，从对象池中移除，就不会回收该对象了。对象可以被异步程序访问到。 2. 合成事件阻止冒泡 2.1 e.stopPropagation 只能阻止合成事件间冒泡，即下层的合成事件

一些程序员小伙伴面试的时候屡次遭遇失败，由于我面试结果还不错，所有很多人来询问我一些面试相关的问题， 我这里给到 5 点建议，希望对大家有帮助。 1. 简历应该是你设计过的 「设计简历」可能对这个词有点迷惑，可能你第一感觉是设计得好看一点，其实我想表达的设计是一种「圈套」，给面试设计的「圈套」，下面我会举例子让你明白这个「圈套」是什么。 我举两个点：技术要点和项目经历。 技术要点(就是自己会哪些技术)和项目经历相信是简历里面必不可少的内容，但是也许你可能忽略了哪些应该写。 之前我给别人看简历的时候，我就会问他们写的技术点三个问题 你对这个技术点的掌握程度是什么样的？ 你对这个技术点准备了哪些问题？ 当问到了相关技术点的时候，你能回答到哪个层次？仅仅了解、用过一两次、熟练使用、还是掌握原理。。。 当你能清楚的回答完这三个问题之后，你对你自己的水平就有了一定的认识，同时你对自己是否符合这个岗位有了一定的判断。我的目的就是让你了解自己的水平，然后才能 针对性 的去复习，查漏补缺，自己心里要有一杆秤，自己把这个知识点掌握到这个程度，能不能胜任这个岗位。 当你了解了之后，然后根据你自己是否有充足的复习时间，你就可以去设计你的技术要点部分了，只写你准备好了的技术点，这个准备好了不是说掌握得很深才叫准备好了，就算是只能回答几个简单的问题也算是准备好了，就是你想准备，然后自己也去复习了的

写在前头 本文希望通过揭开一些 React 隐藏的技术细节, 来辅助对官方文档中某些概念的理解 读者可以将本文看做对官方文档的补充 行文方式我采用的是 提问-解答 的方式, 即先根据官方文档给出的使用规则, 提出问题, Why ? 然后我们根据实际的调试再来解答这个 Why, 最后系统的整理这些 Why 变成 How, 如果你们有更好的行文方式, 也欢迎留言讨论 另外为了阅读体验, 我不会粘贴过多的源码, 避免打断各位读者的思路. 正文 从 Hooks 一些使用限制来看背后隐藏的细节 一. Hooks 为什么只能写在 FCComponent ? React 怎么知道的 ? 其实没有什么黑魔法, React 在初始化的过程中会构建一个 ReactCurrentDispatcher 的全局变量用于跟踪当前的 dispatcher dispatcher 可以理解成一个 Hooks 的代理人 由于你在 FCC 外部执行 Hooks, 这时候要么 React 没有初始化, 要么就是 Hooks 无法关联到 ReactCurrentDispatcher, 大部分场景都是因为生命周期的错配而报错, 所以 React 也并不能百分百知道你的 Hooks 执行时机是否正确 二. React useState如何在没有 Key 的情况下只通过初始值来判断读写的是哪个 State ? 官方文档在关于

话说这天，我们团队开会讨论了一个问题，不，与其说“讨论”，不如说“争吵”更合适。 背景是这样的： 我们要开发一个 xxx 后台管理系统，这个系统业务复杂、功能又多，大家的争吵集中在“这个系统是否应该用前后端分离的方案”。 这次争吵的问题比较典型，于是我就写了这篇文章。为了大家好理解，把“xxx 后台管理系统”泛化一下，变成： 开发一个大型后台管理系统，应该用前后端分离的技术方案吗？ 先说一下，本文中的观点肯定有人不认同，再加上我对前端技术掌握有限，所以大家批判的看吧。 1. 先审题，冷静的分析一下 前后端分离的优点多多，这不需要多说，大家人人都清楚。 来，讨论之前，我们先一起好好审审题。 结合“ 开发一个大型后台管理系统 ”这个约束条件，冷静的分析一下： • 什么是后台管理系统：首先后台管理系统这个称呼，意味着这是一个 B 端系统 。可以小到部门级应用（客户投诉登记系统、办公设备台账系统），大一点可以是大集团级核心系统（500 强保险公司客服、呼叫中心），可以是 ERP、CRM、OA（SAP、用友、泛微协同），可以是一个 B2C 电商的商城后台、支付网关管理控制台，可以是 Saas 的管理后台（Salesforce、Teambition、Jira），可以大到阿里云控制台…… • 什么是大型：我理解大型系统是指功能模块多、交互复杂，而不是访问量、TPS、数据量大。所以 CMS、OA

话说这天，我们团队开会讨论了一个问题，不，与其说“讨论”，不如说“争吵”更合适。 背景是这样的： 我们要开发一个 xxx 后台管理系统，这个系统业务复杂、功能又多，大家的争吵集中在“这个系统是否应该用前后端分离的方案”。 这次争吵的问题比较典型，于是我就写了这篇文章。为了大家好理解，把“xxx 后台管理系统”泛化一下，变成： 开发一个大型后台管理系统，应该用前后端分离的技术方案吗？ 先说一下，本文中的观点肯定有人不认同，再加上我对前端技术掌握有限，所以大家批判的看吧。 1. 先审题，冷静的分析一下 前后端分离的优点多多，这不需要多说，大家人人都清楚。 来，讨论之前，我们先一起好好审审题。 结合“ 开发一个大型后台管理系统 ”这个约束条件，冷静的分析一下： • 什么是后台管理系统：首先后台管理系统这个称呼，意味着这是一个 B 端系统 。可以小到部门级应用（客户投诉登记系统、办公设备台账系统），大一点可以是大集团级核心系统（500 强保险公司客服、呼叫中心），可以是 ERP、CRM、OA（SAP、用友、泛微协同），可以是一个 B2C 电商的商城后台、支付网关管理控制台，可以是 Saas 的管理后台（Salesforce、Teambition、Jira），可以大到阿里云控制台…… • 什么是大型：我理解大型系统是指功能模块多、交互复杂，而不是访问量、TPS、数据量大。所以 CMS、OA

Kendo UI for jQuery R2 2020 SP1试用版下载 Kendo UI 目前最新提供 Kendo UI for jQuery 、 Kendo UI for Angular 、 Kendo UI Support for React 和 Kendo UI Support for Vue 四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。 Grid小部件提供内置的PDF导出功能。 入门 要启用PDF导出： 1. 包括相应的工具栏命令并设置导出设置。 工具栏配置 PDF导出配置 2. 在页面中包含Pako Deflate库来启用压缩。 要通过代码启动PDF导出，请调用saveAsPdf方法。 注意 ： 默认情况下，Kendo UI Grid导出数据的当前页面并应用排序、过滤、分组和聚合。 Grid使用当前的列顺序、可见性和尺寸来生成PDF文件。 下面的示例演示如何启用Grid的PDF导出功能。 <!-- Load Pako Deflate library to enable PDF compression --> <script src="https://kendo.cdn.telerik.com/2020.2.617/js/pako_deflate.min.js"></script> <div id="grid"></div>

目前跨端开发比较热门的就是 React Native 和 Flutter 了，到底该选哪门技术似乎也快成了大前端圈的一个热门话题。对于web前端来说，基于web生态的 React Native 应该是一个更加顺畅而自然的选择；但 Flutter 让人动心的地方就是高性能和 跨端UI一致性。而 React Native 发展不太明朗和 Flutter 越发成熟的走势对比促使我从观望的心态转为加入 Flutter 。 这里主要就是记录一下学习 Flutter 的一些感想和看法： 包管理 布局和样式 json 状态管理 包管理 pubspec.yaml 文件的作用类似于 npm 的 package.json ，而yaml格式也比json方便。但是不能用命令行自动安装包却让习惯了npm的我觉得麻烦。因为Flutter 安装依赖包是这么一个流程： 打开 pub.dev 网站； 搜索需要的包，得到包的名称和版本； 把包名称和版本填入 pubspec.yaml ，最后才开始下载包。 我觉得应该直接命令行安装包，让它帮我们下载，名称版本自动写入 pubspec.yaml 。如果没有指定版本就是默认下载最新版本，因为很多时候我们并不想知道版本号，给我个能用的最新的版本号就ok了。 布局和样式 就和很多人想的一样，为什么不使用 jsx 或者 xml 格式进行布局，因为基于代码的方式看起来太不直观了