react

2020年是充满机遇与挑战的一年，这一年注定不平凡。随着5G商用、传统产业数字化转型加快，我们完全可以想象到互联网行业即将迎来自己的“高光时刻”，因此，现在学习web前端正当时。那么，对于零基础小白而言，如何才能快速学习web前端呢?下面，就为大家分享web前端学习路线。 很多对于web前端工程师并不了解，先给大家介绍一下什么是web前端开发工程师。web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种web技术进行客户端产品的开发。完成客户端程序(也就是浏览器端)的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的web开发，致力于通过技术改善用户体验。 那么零基础小白要如何学习web前端才能快速称为一名合格的web前端开发工程师呢? 1、前端页面重构。主要内容为PC端网站布局、HTML5+CSS3基础、webApp页面布局。学习目标是完成PC端网站布局，webApp页面布局，还要可以通过HTML5+CSS3的2D、3D等属性实现一些精美的动画效果。 2、JavaScript高级课程、PC端全栈项目开发。主要内容为原生JavaScript、面向对象进阶与ES5/ES6应用、JavaScript工具库自主研发、JQuery经典交互特效开发、HTTP协议、Ajax进阶与后端开发

React.StrictMode 一个很蛋疼的事情是在dev环境下, react 会自动在组件最外面包裹一个 React.StrictMode, 用于将组件渲染两次, 主要原因为react团队认为在react组件渲染时不应该有任何副作用被执行, 所以渲染两次可以帮助开发者更早的发现问题 build后可以看到每次就只执行一次了 使用条件 只能在顶层使用, 不能嵌套, 也不能在条件判断和循环中使用, 会直接报错 这是由于hook内部记录状态时使用的链表, 由于判断会打乱调用顺序, 循环不能保证每次调用的次数是一致的, 所以都是被禁止的 useState 在更新state时不会自动合并对象, 不像setState可以通过传递第二个参数来在状态更新之后做一些事情, 尽量使用多个小状态而不是一个大状态 简单计数器 import React, { useState } from "react"; import { inc, applyTo } from "ramda"; const B = () => { const [count, setCount] = useState(0); return ( <div> {count} <button onClick={() => applyTo(inc, setCount)}>inc</button> </div> ); }; export

最近撸react 看到了es6 extends的写法 想深入摸一摸 面向对象继承相关的东西 老夫之前写php的时候 类内的属性和方法同名没事啊 子类或自动覆盖父类的啊 然后！！ js这里竟然报错了 究其原因是因为 js不支持方法和属性重名。。 class parent{ constructor(props) { this.repeat = 'parent' } } class child extends parent{ constructor(){ super() console.log(this.a) } repeat(){ console.log(2) } } let c = new child(); c.repeat() //output: Uncaught TypeError: c.repeat is not a function 来源： oschina 链接： https://my.oschina.net/u/4125329/blog/4319396

前端时间在用phaser.js开发2d游戏。其中有用到像素风格。于是来了一个灵感，何不使用phaser引擎开发一个像素社区？ 说干就干，于是自己动手，用了一个晚上，把核心功能给实现了。 后端用的是laravel+mysql，前端用的react+phaser。 具体效果： 字符串编辑器： 源代码： https://github.com/codetyphon/codeplay 演示地址： http://codeplay.buzz/discover 来源： oschina 链接： https://my.oschina.net/u/4384923/blog/4305972

1. 加载优化 1. 压缩合并 2. 代码分割(code spliting)，可以基于路由或动态加载 3. 第三方模块放在CDN 4. 大模块异步加载，例如: Echarts，可以使用require.ensure，在加载成功后，在显示对应图表 5. 小模块适度合并，将一些零散的小模块合并一起加载，速度较快 6. 可以使用pefetch预加载，在分步场景中非常适合 2. 图片优化 1. 小图使用雪碧图或iconFont 2. 图片使用懒加载 3. webp代替其他格式 4. 图片一定要压缩 5. 可以使用的img的srcset，根据不同分辨率显示不同尺寸图片，这样既保证显示效果，又能节省带宽，提高加载速度 3. css优化 1. css写在头部 2. 避免css表达式 3. 移除空置的css规则 4. 避免行内style样式 4. js优化 1. js写在body底部 2. js用defer放在头部，提前加载时间，又不阻塞dom解析 3. script标签添加crossorigin，方便错误收集 5. 渲染优化 1. 尽量减少reflow和repaint 涉及到样式，尺寸，节点增减的操作，都会触发reflow和repaint。 1.1 用变量缓存dom样式，不要频繁读取 1.2 通过DocumentFragment或innerHTML批量操作dom 1.3 dom隐藏，或复制到内存中

蒲公英 · JELLY技术周刊 Vol.17 React Hooks 相信大家都不陌生，自被设计出以来就备受好评，在很多场景中都有极高的使用率，其中原理更是很多大厂面试中的必考题，很多朋友都能够如数家珍。那么如何去用实现一个简单的 React Hooks 呢？或许大家都有各自的想法，但也不妨来看看文中所述的方案是如何构建的。 登高远眺 天高地迥，觉宇宙之无穷 基础技术 2020 Chrome DevTools 的新特性介绍 作为前端开发，与 Chrome 打交道是家常便饭，我们有必要了解 Chrome 调试工具的更新迭代，对日常开发和调试带来哪些帮助和改善。新 Chrome DevTools 集成了 lighthouse，并且在元素审查面板和性能面板都有一定程度的优化，本文还提供了相关特性的视频演示，非常易于理解学习。 浏览器的任务、微任务、队列和调度 浏览器里的事件循环（Event Loop）一直都是一个老生常谈的话题，社区里各种文章和资料也不少，但是你真的清楚事件循环里面的 tasks、microtasks、queues 这些概念以及他们的调度关系吗？本文是 Google Chrome 的开发人员 Jake Archibald 撰写的一篇博客，内容深入浅出，在任务调度及 JS 栈的部分还细心的绘制了 CSS 交互动画，最后还探讨了不同浏览器的差异以及相关规范的定义，非常值得一读

在阅读Vue（前端框架）以及Spring（Java框架）相关的文章时，经常会看到“脚手架”的概念。 脚手架，英文scaffolding。 编程的世界来源于现实的世界，那么现实世界中的“脚手架”是什么呢？ 脚手架一般理解是建筑中使用的设备工具，为了保证各施工过程顺利进行而搭设的工作平台。 Stack Overflow上有问答： What is scaffolding? Is it a term for a particular platform? Scaffolding is a meta-programming method of building database-backed software applications. It is a technique supported by some model-view-controller frameworks, in which the programmer may write a specification that describes how the application database may be used. The compiler uses this specification to generate code that the application can use to create, read, update

　　机器之心报道 　　 参与：魔王、杜伟 　　 Stack Overflow 2020 年度全球开发者调查报告出炉。报告显示，JavaScript 连续八年成为最常用的编程语言，而在最受开发者喜爱的编程语言榜单中，Python 排名第三，较去年下降一位，被 TypeScript 超越。另一值得关注的结果是，Java 语言的薪酬收入不再是最低了。 　　近日，Stack Overflow 发布了 2020 年度全球开发者报告。这是 Stack Overflow 发布的第十次年度开发者调查结果，在今年 2 月份有将近 65000 名开发者参与了此次调查。 　　与 2018 年的 10 万参与者和 2019 年的 9 万参与者相比，这次调查的参与者数量出现下降。Stack Overflow 表示「今年，我们不打算成为规模最大的调查，而是想使此次调查更具代表性，能够代表全球各地程序员的多样性。」 　　这次调查涉及开发者基本情况、技术、工作和社区多个方面。机器之心选取了该调查报告的核心内容进行介绍，完整报告参见以下链接： 　　报告地址： https://insights.stackoverflow.com/survey/2020#community 　　 调查结果概览 　　在过去五年的最受开发者喜爱的技术榜单中，Python 语言的排名持续上升。但今年 Python 被 TypeScript

一、Web前端兼容性问题 一直以来，Web前端领域最大的问题就是兼容性问题，没有之一。 前端兼容性问题分三类： 浏览器兼容性 屏幕分辨率兼容性 跨平台兼容性 1、浏览器兼容性问题 第一次浏览器大战发生在上个世纪90年代，微软发布了IE浏览器，和网景公司的Netscape Navigator大打出手，1998年网景不得不将公司卖给AOL。没有了对手的IE不思进取，W3C标准支持发展缓慢，为以后的IE兼容性灾难埋下了伏笔。到2004年，IE的市场份额达到95%，但在此之后IE的份额逐步遭其他浏览器蚕食，主要包括Firefox，Chrome，Safari和Opera。. 2001年8月27日，微软发布IE6，时隔五年直到2006年才发布了IE7。2009年3月19日，经历了众多测试版后，IE8最终发布，虽然IE8针对旧版IE在多方面做了很大改进，但在HTML5、CSS 3等标准支持方面仍落后于其他浏览器对手。这三个版本的IE是所有兼容性问题的最大根源，堪称前端噩梦。 IE6、7、8不支持HTML5、CSS3、SVG标准，可被判定为“极难兼容” IE9不支持Flex、Web Socket、WebGL，可被判定为“较难兼容” IE10部分支持Flex（-ms-flexbox）、Web Socket，可被判定为“较易兼容” IE11部分支持Flex、WebGL，可被判定为“较易兼容” IE6

我们的需求 在 中，核心的就是渲染器，它提供了最基础渲染能力，有了它，你可以实现微前端、微服务、远程组件、首屏渲染，甚至可以和 React、EJS 等配合使用。 它可以和怎样的你协作？ 如果你是传统的后端渲染的，需要做SEO，但是你希望在部分布局，部分页面引入 Vue，那么 renderer.renderJson() 足以，将渲染结果传递给后端渲染的模板引擎中即可。 如果你是中后台系统，业务系统全部集中在一个项目，你希望可以按照业务进行服务的拆分，那么 `` 足以 如果你是 CSR 渲染的项目，那么 renderer.renderHtml({ mode: 'csr-html' }) 足以 如果你是 SSR 渲染的项目，那么 renderer.renderHtml({ mode: 'ssr-html' }) 足以 如果你想做微前端、微服务、那么 渲染器 天生就具备了这样的能力，你可以把它当成一个工具函数使用，你可以通过 HTTP 、 RPC 等等各种协议访问到你的服务，然后使用它进行渲染 创建一个渲染器 开发环境 import { SSR } from '@fmfe/genesis-core' ; import { Watch } from '@fmfe/genesis-compiler' ; ​ const start = async () => { const ssr = new