• 前端工程化(一)NPM如何管理依赖包版本?
    在介绍整个依赖系统之前,必须要了解 npm如何管理依赖包的版本,本文将介绍 npm包 的版本发布规范以、何管理各种依赖包的版本以及一些关于包版本的最佳实践。执行 npm ls 可查看当前仓库依赖树上所有包的版本信息。Npm 也使用了该工具来处理版本相关的工作。即保持主版本号不变的情况下,保持次版本号、修订版本号为最新版本。所以,当你决定对外部发布一个正式版本的npm包时,把它的版本标为1.0.0。锁定依赖版本意味着在我们不手动执行更新的情况下,每次安装依赖都会安装固定版本。保证整个团队使用版本号一致的依赖。
  • 大前端技术现在太火了!
    也许很多人觉得大前端这个概念很新,但实际上这个概念已经出现好几年了。在2018年年中,InfoQ举办了首届全球大前端技术大会,在大会中将前后端分离、跨平台和PWA等技术设立了专场,这次大会具有重要的意义,它预示了大前端时代的正式到来。具体来说,Android、iOS、FE、跨平台技术以及周边生态,它们共同组成了大前端,而跨平台技术则充当了连接移动端和前端的桥梁。
  • 会看源码,你将比98.4%的人更容易拿到高配Offer!请看这几个公众号!
    ..这是一个数10万人一起自学编程的分享交流联盟!长按二维码加入我们,即可获得各种最新 it编程自学视频资料900个G!程序员共读,有影响的程序员自媒体!手握 16000 Star 项目,且被多个知名项目 Merge 过 PR。前端你别闹▲▲▲简介:可能是前端最帅和妹子最多的技术公众号,人称“北妈”。关注前后端编程技术 和 社会问题的生活导师,人帅、活好、三观正。他会让你记住两点:1、我最帅!和编程大牛一起学习编程技术,更有Python,前端,Java,PHP,人工智能…
  • 35 道咱们必须要清楚的 React 面试题
    UI 的表示形式保存在内存中,并与实际的 DOM 同步。比较有趣的是,React 实际上并不将事件附加到子节点本身。React 使用单个事件侦听器侦听顶层的所有事件。这对性能有好处,也意味着 React 在更新 DOM 时不需要跟踪事件监听器。而 React 的工作方式则不同。以这种方式由 React 控制其值的输入表单元素称为受控组件。问题 10:如何 React.createElement ?很多开发人员就能无意识使用 JSX,因为它已经与 React 结合在一直了。
  • 【React】你想知道的关于 Refs 的知识都在这了
    设置 Refs1. createRef支持在函数组件和类组件内部使用createRef 是 React16.3 版本中引入的。当 ref 属性用于自定义的 class 组件时, ref 对象接收组件的挂载实例作为其 current 属性。constrefContainer=useRef;useRef 返回的 ref 对象在组件的整个生命周期内保持不变。访问 Refs当 ref 被传递给 React 元素时,对该节点的引用可以在 ref 的 current 属性中访问。这种方式可以帮助我们更精细的控制何时 Refs 被设置和解除。使用 回调 refs 需要将回调函数传递给 React元素 的 ref 属性。
  • React 中获取数据的 3 种方法:哪种最好?
    在 React 中生命周期方法、Hooks和 Suspense是获取数据的方法。缺点样板代码基于类的组件需要继承React.Component,在构造函数中执行 super 等等。此外,当依赖项 query 更新时也会重新执行 fetch 方法。可重用性在 Hooks 中实现的获取数据逻辑很容易重用。注意:截至2019年11月,Suspense 处于试验阶段。优点声明式Suspense 以声明的方式在React中执行异步操作。Suspense设置一个边界,保护获取细节泄露到组件中。Suspense更接近于React本身的声明性本质。
  • 前端使用puppeteer 爬虫生成《React.js 小书》PDF并合并
    前端也可以爬虫,写于2018年08月29日,现在发布到微信公众号申明原创。puppeteer: Google 官方出品的 headless Chrome node 库puppeteer github仓库puppeteer API官方介绍:您可以在浏览器中手动执行的大多数操作都可以使用 Puppeteer完成!生成页面的屏幕截图和 PDF。抓取 SPA并生成预渲染内容。使用最新的 JavaScript和浏览器功能直接在最新版本的 Chrome中运行测试。捕获时间线跟踪 您的网站,以帮助诊断性能问题。因为作中直在使 React.js,也直以来想总结下关于 React.js 的些。希望能够帮助到更多 React.js 刚朋友。从上面 React.js小书截图来看。
  • 老夫决定把这九年的编程经验传授给你。
    明白了JS的面向对象编程,通过JS自定义前端控件,数据与逻辑代码分离,达到优雅地实现前端逻辑。)时,其实间接地创建了一个JQuery的示例。从这个角度讲,学习是值得的。Node.JS火热的时候,我用了一周的业余时间,学习NodeJS编程,配合MongoDB,搭建了简单的日志系统。一方面,不管是React、微信小程序、Node.JS,本质上都是JavaScript、Html、CSS的组合使用,相似度很高,只是各自有各自特点的规范特色而已,学习难度是逐渐降低的。
  • 【第1770期】利用 React 组件的“黄金法则"让代码更优雅之如何发挥钩子的作用
    组件的黄金法则用更自然的方式创建和定义组件,组件只包含它们必需的代码。我们采用如下的目录结构,每个组件都有自己名字命名的文件夹,index 文件是沟通优雅组件和外部世界的桥梁。我们把这个文件叫做 “容器”。由于没有更好的设计模式,“古怪的” 数据结构是最容易想到的的也是最不优雅的方式。之前写的测试也会很难看懂,因为它们 mock 了一个古怪的数据结构。好处之一是你可以很好地复用组件了,但是如果之前直接把古怪的数据结构传入组件,就难以复用了。
  • 你想知道的关于 Refs 的知识都在这了
    通常在构造函数中,将 Refs 分配给实例属性,以便在整个组件中引用。访问 Refs当 ref 被传递给 render 中的元素时,对该节点的引用可以在 ref 的 current 属性中访问。当 ref 属性用于自定义的 class 组件时, ref 对象接收组件的挂载实例作为其 current 属性。constrefContainer=useRef;useRef 返回的 ref 对象在组件的整个生命周期内保持不变。这种方式可以帮助我们更精细的控制何时 Refs 被设置和解除。使用 回调 refs 需要将回调函数传递给 React元素 的 ref 属性。
  • 【React】406- React Hooks异步操作二三事
    React 的类型包 @types/react 中也同步把 React.SFC 改为了 React.FC 。从 16.8 发布至今也有大半年了,但本人水平有限,尤其在 useEffect 和异步任务搭配使用的时候经常踩到一些坑。useState返回的更新状态方法是异步的,要在下次重绘才能获取新值。发送请求也属于 React 定义的副作用之一,因此应当使用 useEffect 来编写。基本语法我就不再过多说明,代码如下:import React, { useState, useEffect } from 'react';const SOME_API = '/api/get/value';export const MyComponent: React.FC<{}> = () => { const [loading, setLoading] = useState; const [value, setValue] = useState; useEffect; return ( <> {loading ?React 会报一个 WarningWarning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup http://function.in Notification大意是说在一个组件卸载了之后不应该再修改它的状态。
  • 最好的JavaScript数据可视化库都在这里了
    为了帮助你轻松地为你最喜欢的应用程序添加漂亮的数据可视化,这里列出了 2019 年最好的 JavaScript 数据可视化库。它是用纯 JavaScript 编写的,基于 zrender 画布。项目地址:https://github.com/recharts/recharts7.Raphaelstar 数:10KRaphael 是一个 JavaScript 矢量库,可在 Web 中绘制矢量图形。该库使用 SVG W3C 和 VML 作为创建图形的基础,因此每个图形对象也是 DOM 对象,你可以附加 JavaScript 事件处理程序。项目地址:https://github.com/uber/react-vis10.React Virtualizedstar 数:17KReact virtualized 是一组 React 组件,有效地呈现大型列表和表格数据。请注意,为了避免版本冲突,必须将 react,react-dom 指定为 peer 依赖。一种优雅而灵活的方式来利用 React 组件来支持实用的数据可视化。
  • JavaScript测试教程-part 2:引入 Enzyme 并测试 React 组件[每日前端夜话0xE8]
    每日前端夜话0xE8每日前端夜话,陪你聊前端。正文共:1319 字预计阅读时间:6 分钟作者:Marcin Wanago翻译:疯狂的技术宅来源:wanago.io1. JavaScript测试教程-part 1:用 Jest 进行单元测试2. JavaScript测试教程–part 2:引入 Enzyme 并测试 React 组件3. JavaScript测试教程–part 3:测试 props,挂载函数和快照测试4. JavaScript测试教程–part 4:模拟 API 调用和模拟 React 组件交互在本教程的第一篇中,我们简要介绍了单元测试的基础。这次要更进一步,使用 Enzyme 库测试 React。它将包含 adapter 的用法,后者是一个附加库,允许你将 Enzyme 与一组特定的 React 版本一起使用。"这里要注意一个非常重要的点:即使我们用了 Enzyme,但测试运行程序仍然是 Jest。
  • 奇舞周刊第 327 期:Lighthouse 测试内幕
    Lighthouse 测试内幕通过这篇文章,读者可以了解到 Lighthouse 是如何做自动化测试的、如何在 Lighthouse 的框架上自定义一些审计项、关键的性能指标是如何模拟计算的。React■ ■ ■2019 React Conf 的总结2019 React Conf 的总结。sunlei推荐React + Typescript 工程化治理实践本文是对一次 React + TypeScript 组件的工程化治理过程所做的总结。CSS■ ■ ■CSS backdrop-filter 简介与苹果 iOS 毛玻璃效果Chrome 76+ 已经原生支持 CSS backdrop-filter 属性,类似 iOS 手机的毛玻璃效果。CSS 值类型文档大全作者整理了近五十个 CSS data type,这些基础的概念对于理解新的 CSS 世界体系非常重要。关于奇舞周刊《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。
  • 【面试题】412- 35 道必须清楚的 React 面试题
    UI 的表示形式保存在内存中,并与实际的 DOM 同步。比较有趣的是,React 实际上并不将事件附加到子节点本身。React 使用单个事件侦听器侦听顶层的所有事件。这对性能有好处,也意味着 React 在更新 DOM 时不需要跟踪事件监听器。问题 5:state 和 props 区别是啥?而 React 的工作方式则不同。以这种方式由 React 控制其值的输入表单元素称为受控组件。问题 10:如何 React.createElement ?很多开发人员就能无意识使用 JSX,因为它已经与 React 结合在一直了。
  • 简单易懂的 React useState() Hook 指南(长文建议收藏)
    我更偏爱函数组件,因为它们足够简单,要使函数组件具有状态管理,可以useState() Hook。本文会逐步讲解如何使用useState() Hook。此外,还会介绍一些常见useState() 坑。useState()是实现灯泡开关状态的 Hoook,将状态添加到函数组件需要4个步骤:启用状态、初始化、读取和更新。[state, setState] = useState返回一个包含2个元素的数组:状态值和状态更新函数。[on, setOn] = useState 管理开/关状态[count, setCount] = useState管理灯泡数量。
  • 你拆分JS代码的方法可能是错的!
    它们看起来似乎可以互换,但显然不行:捆绑拆分:创建更多、更小的文件以获得更好的缓存效果。第二种方法看起来更有吸引力,不是吗?事实上,有很多文章似乎都假设这是拆分 JavaScript 文件唯一有价值的方案。但我想要告诉你的是,对于很多网站来说,第一种方法更有价值,而且它应该是你首先要考虑的。捆绑拆分捆绑拆分背后的想法非常简单。对于频繁访问网站的用户来说,要衡量捆绑拆分所带来的性能提升可能也很棘手,但我们必须这样做!基 线假设我们的 JavaScript 包大小是 400 KB,只包含 main.js 单个文件。
  • 分享19 个来自 2019 React Conf 的总结
    由于 React 的流行,63% 的 JavaScript 开发者都在使用它,因此,团队非常重视社区之类的事情。社区成员遵守 《参与者公约》 ,并提出批评。React 在做的事情,以及原因很重要。你在使用 React 的时候,是否处理过焦点的问题?这个话题稍后会再次提起,但是很高兴看到 React 团队让焦点可访问。并发模式 将使 React 能够对低优先级的工作中断响应,从而使得 React 应用程序具备更高的响应速度。React 可以使得几个工作中的状态同时更新。维护 CSS 很快就会失去控制。它还展示了如何使用 props 来设置 span 标签的颜色。
  • 一名【合格】前端工程师的自检清单
    winter在他的《重学前端》课程中提到:到现在为止,前端工程师已经成为研发体系中的重要岗位之一。可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更没有系统性的教学方案出现。大部分前端工程师的知识,其实都是来自于实践和工作中零散的学习。这不仅仅是我的知识体系,更是我时刻提醒自己的自检清单。
公众号
关注公众号订阅更多技术干货!