React为什么需要Hook

自从React 16.8发布Hook之后,笔者已经在实际项目中使用Hook快一年了,虽然Hook在使用中存在着一些坑,但是总的来说它是一个很好的功能,特别是在减少模板代码和提高代码复用率这些方面特别有用。为了让更多的人了解和使用Hook,我决定写一系列和Hook相关的文章,本篇文章就是这个系列的第一篇,主要和大家聊一下React为什么需要Hook

进击的JAMStack

最近在研究JAMStack的一些相关内容,发现这的确是个好东西,所以想写一篇文章把这个概念分享给还不了解JAMStack的同学。本篇文章主要包含以下的内容:

  • 什么是JAMStack
  • JAMStack有什么优势
  • JAMStack适合什么应用
  • 我的个人思考

什么是JAMStack

概念

JAMStack中的JAM其实是三个词的缩写,它们分别是JavaScript, APIs以及Markdown。而Stack用中文的说法就是技术栈(Tech Stack),也就是我们在构建应用的时候具体使用到的技术的集合。举个例子,国外现在比较火的一个Stack叫做Mean Stack,它表示使用MongoDB + Express.js + AngularJS + Node.js这些技术来构建一个Web应用。因此用最通俗易懂的话来描述JAMStack就是:使用JavaScript,APIs和Markdown三种技术来构建Web应用。所以JAMStack是一种问题解决方案,而不是一个具体的实现。

接着我们再具体看一下JavaScript,APIs和Markdown这三种技术在JAMStack的世界中是起到什么作用的。

Yarn v2介绍

Yarn作为JavaScript生态的一个强大的依赖管理工具在今年1月24日的时候正式发布了v2版本。在本篇文章中,我将会为大家介绍以下内容:

备注:如果你想知道如何直接使用v2版本可以查看Getting Started,如果你想从v1版本迁移到v2版本可以查看Migrations

CSS in JS的好与坏

是什么

CSS-in-JS是一种技术(technique),而不是一个具体的库实现(library)。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面,而不是独立为一些.css.scss或者less之类的文件,这样你就可以在CSS中使用一些属于JS的诸如模块声明,变量定义,函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。值得一提的是,虽然CSS-in-JS不是一种很新的技术,可是它在国内普及度好像并不是很高,它当初的出现是因为一些component-based的Web框架(例如React,Vue和Angular)的逐渐流行,使得开发者也想将组件的CSS样式也一块封装到组件中去以解决原生CSS写法的一系列问题。还有就是CSS-in-JS在React社区的热度是最高的,这是因为React本身不会管用户怎么去为组件定义样式的问题,而Vue和Angular都有属于框架自己的一套定义样式的方案。

本文将通过分析CSS-in-JS这项技术带来的好处以及它存在的一些问题来帮助大家判断自己是不是要在项目中使用CSS-in-JS。

窥探现代浏览器架构-四

前言

本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。这里的翻译不是指直译,而是结合个人的理解将作者想表达的意思表达出来,而且会尽量补充一些相关的内容来帮助大家更好地理解。

到达合成线程的输入

这篇文章是探究Chrome内部工作原理的四集系列文章中的最后一篇了。在上一篇文章中,我们探讨了一下浏览器渲染页面的过程以及学习了一些关于合成线程的知识,在本篇文章中,我们要看一下当用户在网页上输入内容的时候,合成线程(compositor)做了些什么来保证流畅的用户体验的。

窥探现代浏览器架构-三

前言

本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。这里的翻译不是指直译,而是结合个人的理解将作者想表达的意思表达出来,而且会尽量补充一些相关的内容来帮助大家更好地理解。

渲染进程里面发生的事

这篇文章是探究Chrome内部工作原理的四集系列文章中的第三篇。之前我们分别探讨了Chrome的多进程架构以及导航的过程都发生了什么。在本篇文章中,我们将要窥探一下渲染进程在渲染页面的时候具体都发生了什么事情。

渲染进程会影响到Web性能的很多方面。页面渲染的时候发生的东西实在太多了,本篇文章只能作一个大体的介绍。如果你想要了解更多相关的内容,Web Fundamentals的Performance栏目有很多资源可以查看。

窥探现代浏览器架构(二)

前言

本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。这里的翻译不是指直译,而是结合个人的理解将作者想表达的意思表达出来,而且会尽量补充一些相关的内容来帮助大家更好地理解。

导航的时候都发生了什么

这篇文章是探究Chrome内部工作原理的四集系列文章中的第二篇,在上一篇文章中我们探讨了不同进程或者线程是如何负责浏览器各个不同部分的工作的。在这篇文章中,我们将会深入了解每个进程和线程是如何沟通协作来为我们呈现出网站内容的。

让我们来看一个用户浏览网页最简单的情景:你在浏览器导航栏里面输入一个URL然后按下回车键,浏览器接着会从互联网上获取相关的数据并把网页展示出来。在本篇文章中,我们将会重点关注这个简单场景中网站数据请求以及浏览器在呈现网页之前做的准备工作 - 也就是导航(navigation)的过程。

一切都从浏览器进程开始

我们在上一篇文章CPU,GPU,内存和多进程架构中提到,浏览器中tab外面发生的一切都是由浏览器进程(browser process)控制的。浏览器进程有很多负责不同工作的线程(worker thread),其中包括绘制浏览器顶部按钮和导航栏输入框等组件的UI线程(UI thread)、管理网络请求的网络线程(network thread)、以及控制文件读写的存储线程(storage thread)等。当你在导航栏里面输入一个URL的时候,其实就是UI线程在处理你的输入。

UI,网络和存储线程都是属于浏览器进程的

窥探现代浏览器架构(一)

前言

本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。这里的翻译不是指直译,而是结合个人的理解将作者想表达的意思表达出来,而且会尽量补充一些相关的内容来帮助大家更好地理解。

CPU,GPU,内存和多进程架构

在这个4集系列教程里面,我将会从Chrome浏览器的高层次架构(high-level architecture)开始说起,一直深入讲到页面渲染流水线(rendering pipeline)的具体细节。如果你想知道浏览器是怎么把你编写的代码转变成一个可用的网站,或者你不知道为什么一些特定的代码写法可以提高网站的性能的,那你就来对地方了,这篇文章就是为你准备的。

作为本系列文章的第一篇,我们会先了解一些关键的计算机术语以及Chrome浏览器的多进程架构

几个提高效率的console APIs

console.log我相信写过JavaScript人一定都有接触过,它可谓是我们debug的灵丹妙药。可是除了log方法,你知道console还有很多可以帮你快速提高代码debug效率(逼格)的方法吗?

console.log | console.info | console.debug | console.warn | console.error

使用场景

输出不同类型(level)的内容。

用法

这几个方法用起来都差不多,只不过输出结果可能会存在颜色上的区别:

注意console.debug如果没有输出可以将log level中的verbose选上(chrome):

Svelte 3 初学者完全指南

React, Vue和Angular差不多占据了Web开发的大部分江山,可是最近半年Svelte开始逐渐吸引越来越多人的眼球。这个Svelte框架到底有什么过人之处呢?本文将会为大家分析一下Svelte火起来的原因,并且通过使用Svelte去搭建一个简单的书店应用(bookshop)来帮助大家快速入门这门框架。

Svelte为什么会火?

要想知道Svelte为什么会火,首先得看看React和Vue这些框架存在什么问题。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×