react

jsx中代码: <Icon type='plus' onClick={this.showAlbum} /> 对应的点击事件: showAlbum = e => { e.stopPropagation(); this.setState({ albumVisible: true, }); }; 看到了吗, 关键是 e.stopPropagation(); 来源： oschina 链接： https://my.oschina.net/u/4321566/blog/4276119

先进行说明一下，本人刚刚大三结束，去年十二月的时候是投递了字节的视频架构的实习，共三轮技术面+一轮hr面，成功拿到offer实习了五个月。 今年秋招提前批是投了抖音架构，共三轮技术面+一轮hr面，已经成功拿到offer。 由于去年实习面经没有发，所以跟着本次提前批面经一共八轮面试一起发了。 面经更多的记录我当时面试的思考和一些相关问题回答的切入点，可能会跟其他面经直接给答案有所不同，其实掌握了切入点再进行扩展就是一份好的回答了~ 实习一面（50min） 面试我的的是一个二十出头的小哥哥，第一次面试我还是比较紧张的，还好小哥哥待人和蔼可亲，针对不会的问题并没有刁难我，反而给我不少提示（给点个赞） 首先是自我介绍，问了下我学习前端的途径和方法啥的，算是暖了个开场吧，然后是具体的问题。 1. ES6新特性说一下？ 我首先说的是let、const，学长就直接让我详细说一下这两个。let、const有三个方面可说： 1.1 let、const声明的变量只在其所在的块代码内有效，隐式截取了作用域，有了块级作用域的概念。 1.2 暂时性死区，变量声明提升但在不会被赋值为`undefined`，不能在声明之前使用。 1.3 不允许重复声明。 然后给了两个例子说一下： 2. ES6之前的模块引入方式和区别 ES6之前模块引入主要是CommonJS和AMD两种。

什么是单元测试？ 测试是一种验证我们的代码是否可以按预期工作的手段。 被测试的对象可以是我们程序的任何一个组成部分。大到一个分为多步骤的下单流程，小到代码中的一个函数。 单元测试特指被测试对象为程序中最小组成单元的测试。这里的最小组成单元可以是一个函数、一个类等等。 单元测试的优势 由于被测试对象的简单（通常只有一个或多个输入以及一个输出），这就决定了单元测试开发起来也很简单，通常每个测试只有几行到十几行不等。测试代码的简单表示它可以被更频繁的执行（事实上，很多单元测试框架都有 watch 模式。每次改动代码时都会自动执行单元测试）。更频繁的执行意味着更早的发现问题。 试想，随着代码的不断迭代，程序中总有某些位置会频繁出现某类问题。在没有单元测试时程序员之间往往都是“口口相传”，隔一段时间很可能由于疏忽还会犯同一个错误。有了单元测试我们就可以为这些问题点编写对应的测试代码，每次提交代码前都执行一遍，可以极大的降低相同 bug 重复出现的概率。 此外，要为一个被测试对象编写单元测试，那么它应该首先是容易被测试的（这似乎是一句废话）。反过来讲，如果你面对一个函数、类却很难编写测试代码的时候，很可能是你的代码设计上存在问题。比如和外部依赖耦合过于紧密。这种情况下，编写单元测试的过程会倒逼我们优化我们代码的结构。将复杂的代码拆解成为更简单、更容易测试的片段

现在前端圈子最热的莫过于 ReactNative。以 Web 的开发方式来开发 Native，并且仗这 facebook 这个国际互联网公司做保证，这种革命性的产品都让前端 coder 和客户端 coder 都炸开了。 本文打算以 ReactNative 的 Text 标签的角度，这个最基本的标签，来带你跨入入 ReactNative 的世界的第一步。 如果把 React Native 上的 View 标签对应成 web 的 div 标签，那么想把 Text 标签对应为 web 的 Span 标签或者 P 标签真是大错特错。严格来说，你应该把 Text 当初一个 ReactNative 的组件！（是的，本身就是！） Text 标签在 ReactNative 上非常非常的常用，其属性方法，内部细节为开发者所必须掌握的。同时我们能透过 Text 标签，也能理解 ReactNative 上的一些设计理念。 一，文本输出必须用 Text 标签包起来 这点大家应该都比较清楚，如果使用 View 标签输出文本，ReactNative 是会直接报错的，我们必须用 Text 标签包起来。 1 2 3 4 5 // 直接编译不通过，少年 < View > Some text < / View > // success < View > < Text > Some text < / Text > <

之前写了在vue中使用mockjs模拟后台接口,现在使用react,也把react中的使用写一下.基本方法和vue一样 我这个项目是用react脚手架搭建的,项目源码地址: https://github.com/shengbid/my-react-admin 1. 安装mockjs和axios yarn add axios -S yarn add mockjs - D 2. 在项目中新建几个文件,文件位置也没有特别规定要放在哪,根据自己的习惯放就行了 需要一个mock文件,配置接口数据;一个axios文件,配置axios;一般还会有一个接口管理文件,放接口名称,现在都不会直接在项目中引入axios调用 3. axios文件配置, 就是正常的请求拦截响应处理 /src/common/request.js import axios from 'axios' import { message } from 'antd' ; const service = axios.create({ // baseURL: '', timeout: 5000 }) service.interceptors.request.use( config => { return config }, error => { console.log(error) return Promise.reject(error)

本文是Scratch3.0二次开发添加登录功能部分——添加点击登录按钮弹窗功能，下一篇会介绍添加接口部分以及登录接口怎么写。 0. 写在前面 借鉴：http://www.liyblog.top/ 感谢！希望能一直更新。 因为我对react本身不如vue那么熟悉，而且今日来感觉react比vue要繁琐很多，相关资料和帖子也远不如vue多，所以走了些弯路，如今总结一下，过程中可能不是很规范正确，产生一些问题，希望各位评论指出来， 当然如果有更好的办法和帖子麻烦也在评论添加地址，我也去学习一下，总之希望能一起学习成长。我的邮箱：yh709459462@163.com。 1. 基本文件结构 因为是借鉴上边大佬的博客http://www.liyblog.top/p/22，我暂时时间比较紧不做赘述，以后再完善。所以各位有需要的先去按照他的教程，一步步往下走，大致是一样的，但是因为我和另一个人按教程走完后并不能成功，所以我做了一些改动。 整个博文内容较多，有点格式问题请谅解 按照上边的教程，走的差不多了之后，跟着我往下走。我的顺序可能是纯粹的改动，不会根据react运行流程去一个文件跳一个文件的改，这样更快，看上面的博文就能理解了文件跳转了。改动主要如下： （1）componets/login-modals目录以及里面的 login-modals.jsx更改名字为login。其他文件不用动。

这里写目录标题 背景 解决之路 为什么用微前端 为什么我们选择`qiankun` 重构之路 两个 React 的坑 babel 配置读取不到的坑 通信 异步加载 浏览器的 fetch 差异 总结 优化开发体验篇 内存占用严重，子应用无法热更新 monorepo 项目的开发命令管理 公共包 结尾 更多文章 背景 📢 博客首发 : SugarTurboS Blog 团队的项目 A 经历两年需求的洗礼，一些问题也随之暴露出来： 项目引用的 npm 包很多，业务代码也很多，有着向巨石应用发展的趋势。巨石应用的一些典型问题如下： 构建效率低下 、 dev-server 占用内存大甚至内存泄露 、 维护成本急剧增加 。 项目主框架升级成本高，要 兼容旧代码 。 项目里的某些业务几乎不再迭代，但每个版本依然会被打包构建，每次构建的 npm 包版本可能不同，导致一些 隐藏未知错误 。 该项目之前是由两个不同的项目合并而来，代码风格上存在两种方式，解决类似问题时引入的技术方案也是不一样，导致后期 维护成本高 ，同样对于新人来说 阅读性差 。 解决之路 为什么用微前端 对于微前端跟 iframe 的方案区别，为什么用微前端这个问题，这里不再累赘， qiankun 里面有一篇文章已经说得非常不错，有兴趣可以去看看。 why not iframe 为什么我们选择 qiankun qiankun

转载请注明出处： 葡萄城官网 ，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 表格作为数据呈现的一种基本方式，在各类软件系统都发挥着重要的作用。在移动互联时代，即便再复杂的数据通过“表格”的整理，都可以清晰的呈现给用户，并支持用户从多个维度查看、筛选和修改。不论是应对文档、报告、凭证，还是票据，表格都能够附加存储更多的样式信息，尤其对离散式数据存储更加高效。 如今，企业开始纷纷尝试信息化转型，前端、后端、中台、云，这些概念也逐渐变得家喻户晓，在几乎所有的B端产品中，表格都作为一种交互式组件受到广泛欢迎。 不过即便如此，表格也经常因为样式复杂、操作繁琐等因素，在用户使用时造成诸多体验问题，尤其在Web项目中，表格技术时常受限于前端性能制约。 那么，有没有一种办法，可以帮助开发者突破前端表格技术的困境，实现关键技术落地呢？ 2020年6月30日，作为全球领先的软件开发技术提供商，葡萄城举办了“赋能·智变”线上品牌战略发布会。本次会议上，葡萄城正式发布“赋能开发者”业务使命，并就前端表格开发等技术话题进行了分享。 前端表格为开发者带来的困扰 在C/S架构的应用程序中，表格类组件可以获取更多资源支持，内存控制也更加直接。但是当企业进行B/S转型时，前端表格却面临着诸多挑战。 例如，多浏览器差异、浏览器沙箱机制、内存访问受限、客户端性能低下等

我经常会看到很多同学在学习前端的时候比较迷茫，不知道到底应该以怎样的学习路线来入门和进阶前端领域。每次遇到这种问题我也会分享一下自己的学习经验，但是发现这是一个问得非常多的一个共性问题。 作为程序员，肯定是不能容忍重复无味的劳动的，因此我就系统地总结分享一下我的前端学习路线，希望对你能够有所帮助。 前言 前端学习是一个螺旋上升的过程，既要反复地看书，也要抓紧时间进行实战。只看书，看了就会忘，所以必须将看书和写代码相结合。只要你认真学，入门前端的话三个月左右就可以了。之后我还给出了前端进阶路线，帮助你提升前端技能水平。我把前端入门和前端进阶一共分为六个阶段，并对相应阶段所需要的大致的学习时间进行了标注。 我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流裙：前面：603 中间：985 最后：993。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题， 前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。 前端入门 入门前端开发主要需要学习 HTML，CSS 和 JavaScript 三大件。之后学习前端主流框架的使用，并基于已学内容开发一个小项目进行实战。当你把这些学习并理解透彻以后，也就算真正地入门前端了

概念理解 防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 说起防抖大家肯定会想到节流,着两个就跟一对双胞胎一样,让大家经常傻傻搞不清楚 我们先来看一下节流的概念 节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率 我拿电梯关门举个例子吧: 防抖 你按了电梯关门按钮,电梯还有三秒要关闭,在你要关闭前的1.5s,按了一次开门按钮电梯将会重新将要关闭时间重置为3秒 节流 你按了电梯关门按钮,在电梯将要关闭的三秒内,你再怎么按电梯按钮都不会响应 常用情况 防抖 在前端开发中会遇到一些频繁的事件触发，比如： mousedown、mousemove keyup、keydown 节流 在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。 防抖实现方式 第一版 function debounce(func, wait) { return function () { let timer clearTimeout(timer) timer = setTimeout(() => { func }, wait) } } 这个是最简单的一版debounce的实现方式，但是缺点有许多，我们先来看第一个 一