react

问题描述 这里是 React 日期选择器组件报的错误，在一个活动列表点击编辑某行记录时控制台打印的错误。 部分错误信息： Uncaught Invariant Violation: Minified React error #31; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=31&args[]=Tue%20Mar%2031%202020%2023%3A01%3A13%20GMT%2B0800%20(%E4%B8%AD%E5%9B%BD%E6%A0%87%E5%87%86%E6%97%B6%E9%97%B4)&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 问题分析 Uncaught Invariant Violation: Minified React error #31; 未捕获的不变的违规问题，缩小问题排查范围，错误码为 31； 类似的问题建议根据错误码查看对应的解决方案，此处 ErrorCode 为31，点击访问 Visit 后面的地址，查看报错原因，如下，其实已经给出了问题所在

一、前端开发环境 1、开发环境 windows 10操作系统； Node.js v10.16.0； webstorm 2019.3.4 x64； 2、前端技术栈 react v16.9 hooks + redux + react-router4； antd； marked hightlight.js； webpach打包优化； axios封装； 二、前端知识回顾 1、基础学习 如果没有接触过react的话，推荐先学习一下react基础知识： 1、react的入门教学视频入口： React 入门教程（开发文档） ； 2、官方教程入口： 入门教程: 认识 React ； 3、redux教程： 从零实现一个 redux ； 2、命名规范 html标签：小写字符开始； 自定义React组件：大写字符开始； 其它变量、方法：函数驼峰命名法； 文件夹、文件命名：全部小写，中间使用-分割，如data-assets； 三、npm使用 1、npm介绍 npm是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从npm服务器下载别人编写的第三方包到本地使用； 允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用； 允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用； 由于新版的Node.js已经集成了npm

js： 怎么实现this对象的深拷贝 文件上传如何做到断点续传 表单可以跨域吗 promise,async有什么区别 搜索请求如何处理（防抖） 搜索请求中文如何请求 介绍观察者模式 介绍中介者模式 观察者和订阅发布的区别，各自用在哪里 介绍service worker 介绍promise，异常捕获 浏览器事件流向 介绍事件代理及其优缺点 介绍this各种情况 前端怎么控制管理路由 使用路由时出现问题如何解决 js异步解决方案的发展历程以及优缺点 对async,await的理解，内部原理 介绍下promise，内部实现 bind,call,apply的区别 动画的了解 介绍下原型链（解决的是继承问题吗） 对跨域的了解 介绍暂时性死区 es6中map和原生的对象有什么区别 如何设计promise.all() sum(2,3)实现sum(2)(3)的效果 两个对象如何比较 js原型 变量作用域链 防抖和节流的区别 介绍各种异步方案 介绍Fiber 介绍dom树对比 项目中如何应用数据结构 设计模式-前端开发中用到哪些设计模式 [1,2,3,4,5]变成[1,2,3,a,b,5] 取数组最大值（es5,es6） es5和es6有什么区别 some,every,find,filter,map,forEach有什么区别 页面上有一万个button如何绑定事件 如何判断是button

前端额前端题库 阿里 使用过的koa2中间件 koa-body原理 介绍自己写过的中间件 有没有涉及到Cluster 介绍pm2 master挂了的话pm2怎么处理 如何和MySQL进行通信 React声明周期及自己的理解 如何配置React-Router 路由的动态加载模块 服务端渲染SSR 介绍路由的history 介绍Redux数据流的流程 Redux如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理 多个组件之间如何拆分各自的state，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思考这块 使用过的Redux中间件 如何解决跨域的问题 常见Http请求头 移动端适配1px的问题 介绍flex布局 其他css方式设置垂直居中 居中为什么要使用transform（为什么不使用marginLeft/Top） 使用过webpack里面哪些plugin和loader webpack里面的插件是怎么实现的 dev-server是怎么跑起来 项目优化 抽取公共文件是怎么配置的 项目中如何处理安全问题 怎么实现this对象的深拷贝 网易 介绍redux，主要解决什么问题 文件上传如何做断点续传 表单可以跨域吗 promise、async有什么区别 搜索请求如何处理（防抖） 搜索请求中文如何请求 介绍观察者模式 介绍中介者模式 观察者和订阅-发布的区别

Proxy对象 在一个系统中，总要存储一些数据，对于这些数据，可能有一些是希望我们访问的，但是总有一些是中重要的，不希望我们访问的，希望保护起来，因此ES6新增了代理，在目标对象前架设个“拦截“层，外界对该对象的访问必须通过这层拦截，我们可以对外界的访问进行过滤和改写。 注意：Proxy修改了某些操作的默认行为，等同于在语言层做出修改，所以也属于”元编程“，即对语言进行编程。 语法： let proxy = new Proxy(target,handler) target 表示被代理的对象 handler 表示操作被代理的对象 注意: [[]] 为引擎内部属性或方法，外部不能获取 let star = { name: '尼古拉斯赵四', girlFriend: '赵丽颖', age: 40 } // 代理对象 let proxy = new Proxy(star, { // 取值方法 get(target, key, receiver) { // 如果是重要的数据，不要访问 if (key === 'girlFriend') { throw new Error('不能访问girlFriend') } if (key === 'age') { return 0 } // target 代表 star， key 代表属性名称， receiver代表proxy，

前言 Hi，大家好，今天非常高兴能有机会作为讲师，来给大家分享关于《如何设计实现中后台搭建 PaaS 平台》这个话题。今天的分享将围绕阿里淘系技术部飞冰系列产品中的中后台搭建产品 iceluna 来进行展开。 个人介绍 在正式分享之前，先自我介绍一下。我是来自阿里淘系营销中后台团队的月飞，负责中后台搭建产品 iceluna，以及《阿里集团中后台搭建协议标准规范》的推广和落地。2013 年加入阿里巴巴聚划算，负责 PC & 无线详情。2016 年加入天猫，带领营销玩法团队，负责玩法、互动类型业务。2019 年加入淘系技术部，带领营销中后台团队，负责中后台业务，专注于中后台搭建产品建设。 话题介绍 今天的话题是搭建，以面向角色的不同大致可以分为面向运营和面向研发两类搭建产品。面向运营的搭建产品主要是以可视化配置 ( No-code ) 的方式进行完整页面搭建，如营销活动页面搭建。面向研发的搭建产品主要以低代码开发 ( Low-code ) 的方式，搭建“中后台系统”或者“无线模块”，如商家、小二后台系统的搭建，无线 Rax 模块的搭建。今天我这边的话题是中后台系统搭建，跟营销活动类页面的搭建在面向角色和搭建模式上是非常不同的，接下来主要围绕 “ iceluna 产品 ” 和 “ PaaS 平台建设 ” 2 个维度来展开分享。 分享大纲 这是我分享的大纲，我会先对 iceluna

一、前端项目结构 在上一节的基础上，我们分别在src下创建如下文件夹： assets：静态文件； components：公共组件，比如面包屑、编辑器、svg图标、分页器等等； hooks：函数组件，使用 React 16.8引进的Hook 特性实现； layout：布局组件； redux：redux目录，负责状态管理； routes：路由，负责路由管理； styles：全局样式； utils：工具包； views：视图层； 二、redux目录构建 我们项目使用redux进行状态管理，在使用redux状态管理器之前，我们需要安装依赖包： npm install redux --save npm install react-redux --save npm install redux-logger --save npm install redux-thunk --save npm install redux-devtools-extension --save 1、在redux文件夹下创建root_reducers.js文件，用于保存整个项目使用到的reducer： /** * @author zy * @date 2020/4/5 * @Description: 合并reducer */ import {combineReducers} from 'redux'; export

Reactjs 常用 Hooks 1. useClippy 用来复制数据到剪切板的 hook, clipboard 是剪切板中的数据, setClipboard 用来向剪切板中设置数据. import useClippy from "use-clippy" function Component() { const [ clipboard, setClipboard ] = useClipy() return ( <div> <div>Clipboard</div> <div>{clipboard}</div> <button onClick={() => setClipboard("nnamdi")}>Set Clipboard</button> </div> ) } 2. useBrowserContextCommunication useBrowserContextCommunication使用广播通道API来提供不同浏览器上下文(选项卡、iframe、窗口)之间通信的简单解决方案。 import useBrowserContextCommunication from "react-window-communication-hook" const [communicationState, postMessage] = useBrowserContextCommunication

react一般使用 jsx 语法（优点：如防止 XSS 攻击等）， jsx 中的属性名和 js 中大部分写法一样，即 camelCase （小驼峰）， 除className代替class，htmlFor代替for等 ，空标签一般使用单标签 组件名 首字母大写 或者使用 C amelCase ( 大驼峰) 将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象（“props”对象）传递给组件。 组件中的 props 对象包括所接收的属性及子组件 来源： oschina 链接： https://my.oschina.net/liyoungs/blog/3216196

Hook是什么 Hook是React从16.8开始支持的特性，使用Hook可以在不使用class时使用state Hook支持在不需要修改组件状态的情况下复用逻辑状态，从而解决使用render prop和高阶组件产生的代码结构复杂的问题 Hook可以解决在class中因为组件在生命周期函数内分散处理导致的逻辑混乱。 Hook可以解决在class中this的复杂问题。 Hook的结构 State Hook 在通过state进行状态管理时，我们会使用contructor()构造器来初始化state,使用setState()更新state的状态 在Hook里，不再使用以上的两种方法，将会使用 const [name,setName]=useState(defaultValue); 这样的方法进行对状态进行管理。 UseState将会被调用来为函数组件添加state，一个useState方法将会返回一对值（一个数组），一个当前状态和更新这个当前状态的函数，可以在组件的其他地方调用这个更新函数。 这对返回值使用数组解构。 一个useState语句将会创造一个状态。 Effect Hook 我们可以把useEffect看作是componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。