react

同时支持 React 、 Vue 、 Angular 及 原生 JavaScript 命令式调用的 Guard2.0 上线了，本次升级，我们主要做了以下优化： Guard2.0 和 Authing2.0 官方托管的登录页面 UI 和行为 一致。 Guard2.0 提供了 React 、 Vue 和 Angular 版的组件，并同时支持 命令式调用 。 React 版的打包产物降低到了 512KB，其他版本的也都在 700KB 左右。 移除了路由跳转逻辑，能够更加简单的嵌入到应用中。 全面支持单点登录 SSO。 ​基本使用 通过 npm 安装或 cdn 引入文件就可以使用 Guard 2.0。 通过 npm 使用 安装 原生 JavaScript React Vue Angular 使用 原生 JavaScript React Vue Angular 通过 cdn 使用 引入代码 原生 JavaScript React Vue Angular 使用 原生 JavaScript React Vue Angular SSO 支持 单点登录（Single Sign On），简称为 SSO，是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。 随着企业发展，你的公司可能会采购各种 SaaS 软件、OA 系统、ERP

1、react项目构建使用脚手架：create-react-app 配置：antd UI框架配置和less配置 一、命令行依次输入如下的命令 npm install -g create-react-app create-react-app my-app cd my-app npm start npm install create-react-app yarn -g create-react-app your_project_name cd your_project_name yarn start yarn add antd --save ----安装antdesign 来源： oschina 链接： https://my.oschina.net/u/4672357/blog/4742207

移动端跨平台开发框架 UPDATE：2020/4/16 uniapp开始部分支持快应用开发 。 UPDATE：微信也正式加入多端大战了， https://github.com/Tencent/kbone 各框架比较 https://ask.dcloud.net.cn/article/35947 *上图严格来讲wepy不是多端框架，只是用vue写小程序；而myvue也是2.0版本后才加入 另一篇比较文章， 传送门 ，结论是： uni-app > taro > mpvue > 原生微信小程序、wepy https://cml.js.org/#/ 滴滴变色龙 https://weex.apache.org/ 阿里作品，Vue.js来开发的。vue和weex的整合解决方案 Eros https://taro.aotu.io/ 京东的一套遵循 React 语法规范的多端统一开发框架（ 几套小程序框架的比较 ） https://ionicframework.com/ angularjs编程语言 https://github.com/Tencent/omi 腾讯推出的 https://uniapp.dcloud.io/ 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。 效果体验 https://phonegap

嵌套表头这个功能在经历了多次调整后，终于在V2.13.0这个版本内发布。 效果展示 先来一张嵌套表头的效果图 如何使用 配置起来相当简单，只需要在配置项中的 columnData 中增加 children 属性即可实现。 children 属性为数组类型, 与 columnData 使用方式相同， children 可无限嵌套。 <table id='table-demo-nestedCode'></table> new GridManager(document.querySelector('table'), { gridManagerName: 'demo-nestedCode', columnData:[ // 列的唯一索引。字符串类型，必设项 key: 'title', // 列的显示文本。[字符串 或 函数]类型，必设项。 // 如果当前使用了angular、vue、react版本，这里可以直接使用框架模版 text: '标题', // 子项配置, 通过该项可以实现嵌套表头 // 存在该项时，将禁用: supportConfig、supportDrag、supportAdjust、columnData.fixed // 数组对像与columnData对象配置相同，可多层嵌套。 // 注意: 现有版本中最后一层的宽度会平分上一层的宽度 children: [] ] });

前言 在本周接触了一个关于“前端框架演变”的话题。今天我们就来聊聊，它到底是怎么进行演变的。 前端框架演变 web1.0时代 此时前端展示数据比较简单，通常是由后台使用模板引擎直接渲染的。在这个时期都还未产生“前端工程师”，更别谈前端的发展能有多快了。这个时代作者经历的并不多，比较也已经过去了很多年了，这里就不深究。 web2.0时代 前端展示趋于复杂，所以逐渐就开始前后端分离式架构。此时有一个关键词ugc: user generate content 用户生成内容，也意味着交互越来越复杂，故而逐渐产生了“前端工程师”，专门来维护这些复杂的交互界面，后台也可以专注于本该属于他们自己的业务逻辑以及业务架构中。 第一个时期：DIV+CSS布局解放：面向 DOM 编程 在面向DOM编程过程非常直观并且易操作，有一个缺点就是大量的代码冗余，例如获取元素等，于是乎就诞生了伟大的jQuery库 jquery优势： 轻量级(采用 UglifyJS 压缩后，大小保持在30kb左右) 强大的选择器 出色的DOM操作的封装 可靠的事件处理机制 对Ajax的封装完善 不污染顶级变量(jQuery只建立一个名为jQuery的对象) 出色的浏览器兼容性 链式操作方式 丰富的插件支持 第二个时期：Ajax 动态网页：面向数据编程 Ajax直接拯救了JavaScript这么语言。

Jest同时支持ts和react jsx TypeScript + Jest + React-Testing-Library： https://www.jianshu.com/p/1bef70cfe712 jest配置文件 // jest.config.js module.exports = { // preset: 'ts-jest', // testEnvironment: 'node', // roots: ['<rootDir>/src'], transform: { '^.+\\.tsx?$': 'ts-jest', }, testRegex: '^.+\\.test\\.(ts|tsx)$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], moduleNameMapper: { "\\.(css|less)$": "identity-obj-proxy", }, }; @testing-library/react的query api： https://testing-library.com/docs/dom-testing-library/api-queries ByLabelText ByPlaceholderText ByText 。。。 @testing-library

组件 1. 无状态组件 在React中，组件的名字必须用大写字母开头，而包含该组件定义的文件名也应该是大写字母(便于区分，也可以不是)。 无状态组件是纯展示组件，仅仅只是用于数据的展示，只根据传入的props来进行展示，不涉及到state状态处理，通过函数式的方式来创建一个无状态函数式组件(大多数组件都是无状态组件，通过简单的组合可以构建成其他的组件，最后合并成一个大的应用)。 无状态函数式组件是一个只带有render方法的组件，通过函数形式或者箭头函数形式创建，该组件无state状态。 import React from "react"; //创建方式一,相当于es5的函数声明的方式创建 function NoState (props) { return ( <div>this is NoState Component</div> ) } //创建方式二,相当于es5的函数表达式的方式创建 const NoState = (props) => { return ( <div>this is Nostate Component</div> ) } export default NoState 无状态函数式组件没有组件实例化的过程，成为一个render方法的函数来执行，减少分配的内存，使整体渲染性能得到提高，因此展示数据的组件优先选择这种方式。 无状态组件没有实例化得过程

什么是React A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 用来构建UI的 JavaScript库 React 不是一个 MVC 框架，仅仅是视图（V）层的库 特点 1 使用 JSX语法 创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门 2 性能高的让人称赞：通过 diff算法 和 虚拟DOM 实现视图的高效更新 3 HTML仅仅是个开始 为什么要用React 1 使用组件化开发方式，符合现代Web开发的趋势 2 技术成熟，社区完善，配件齐全，适用于大型Web项目（生态系统健全） 3 由Facebook专门的团队维护，技术支持可靠 4 ReactNative - Learn once, write anywhere: Build mobile apps with React 5 使用方式简单，性能非常高，支持服务端渲染 6 React非常火，从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目 React中的核心概念 1 虚拟DOM（Virtual DOM） 2 Diff算法（虚拟DOM的加速器，提升React性能的法宝） 虚拟DOM（Vitural DOM） React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异

react组件的生命周期大致分为三种状态 mounting 开始插入真实DOM 初始化render updating props 或者 state 更新之后组件的更新状态 也就是render unmounting 组件渲染结束，移处真实DOM 其中除了unmounting每个状态又有对应的will 和 did 方法共有5个函数。 componentWillMount componentDidMount componentWillUpdate componentDidUpdate componentWillUnmount 除此之外还有两个特殊的方法shouldComponentUpdate(state或者props改变时会触发的函数)以及componentWillReceiveProps（props改变会触发的函数） 它们的执行顺序分别是 初始化（init render ）： getDefaultProps => getInitalStates => componentWillMount => render => componentDidMount props变化 ： componentWillReceiveProps => shouldComponentUpdate => componentWillUpdate => render =>componentDidUpdate

3YAdmin 基于React+Antd构建。GitHub搜索React+Antd+Admin出来的结果没有上百也有几十个，为什么还要写这个东西呢？ 一个后台管理系统的核心我认为应该是权限控制，表单以及错误信息收集这三大块，前两个最为重要。而GitHub上的大多数项目关注点都不在这里，各种第三方组件堆砌在一起，看起来很炫酷，但是实用性没多大，改起来也麻烦(如果是vue,可以看我的另一个项目 vue-quasar-admin )。 有人可能会有疑问：权限控制，不同系统实现不一样，根本没法做到通用。权限控制的模型就那几种，而且大部分都是RBAC，可能做不到完全通用，但是至少改动不会太大。 3YAdmin    3YAdmin 是一个专注通用权限控制与表单的后台管理系统模板。   3YAdmin支持两种布局模式，Tab模式和正常模式。两种模式是webpack打包编译时确定的，打包某个模式时不会引入另外一种模式下的多余代码(React 实现Tab模式比较蛋疼)。   3YAdmin实现了RBAC权限控制模型的核心功能页面和操作。   3YAdmin通过解析定义好的JSON数据，可以生成查询表单，静态表单，动态表单。   搭配 lazy-mock 可以快速生成前后端带mock数据的增删改查功能(简单的代码生成器)。 online demo: Tab Mode Common Mode 登录账号