原创 React--自定義hooks

React內置的hooks函數解決了函數組件無法使用state以及在傳統寫法中生命週期函數混亂和this指向的問題。 而hooks所帶來的組件複用性的提升則是由自定義hooks來體現的。 傳統的組件複用多是渲染屬性或者是高階組件這

原创 React之lazy與suspense

文章目錄動態importlazysuspenseError boundariesgetDerivedStateFromErrorcomponentDidCatch 動態import 在說lazy和suspense之前,還是先說說動

原创 React—useMemo與useCallback

看到“memo”這個字眼,很多人應該會想到memo方法。這是一個高階函數,它會返回一個函數組件,作用相當於PureComponent。 而useMemo的作用也有點像,只不過它不是作用在函數組件上,而是在一段邏輯上,例如: con

原创 React—useRef

相信有過React使用經驗的人對ref都會熟悉,它可以用來獲取組件實例對象或者是DOM對象。 而useRef這個hooks函數,除了傳統的用法之外,它還可以“跨渲染週期”保存數據。 首先來看一下它傳統的用法: import Rea

原创 React--useContext

在出現useContext之前,使用context的方式主要是兩種,第一種需要使用Consumer: class Component2 extends Component{ render(){ return (

原创 Webpack--自己寫一個Loader

先直接來看代碼: module.exports = function(source){ return source.replace('Webpack', 'JavaScript'); } 這三行代碼就實現了一個最簡單的L

原创 Webpack之DLL

文章目錄引入流程問題 引入 在我們的項目中,免不了要引入許多的第三方模塊。這些第三方模塊在打包的時候就會被打包進最後生成的文件之中。導致最後生成的文件過大的同時也增加了打包的時間。 這時我們就會想,如果這些第三方模塊能只打包一次,

原创 Webpack之resolve

文章目錄resolve.extensions注意resolve.mainFilesresolve.alias resolve.extensions 我們在引入外部模塊的時候,通常會有這種寫法:import test from '.

原创 webpack-dev-server與單頁應用路由

首先是三個使用React編寫的文件: index.js: import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { B

原创 Webpack與ESLint

文章目錄概念使用 概念 在團隊中,每個人的代碼風格都不盡相同。自然的,提交到代碼庫裏的代碼也就風格多樣。 這不是一個好事,統一的代碼風格有助於團隊成員理解他人寫的代碼,也易於維護。 那麼想要所有人的代碼風格統一,我們就需要用到ES

原创 Webpack之Shimming

文章目錄引入使用this 引入 首先在index.js內寫如下內容: import _ lodash from 'lodash'; import { test } from './test'; console.log(_.join

原创 Webpack與TypeScript

文章目錄引入使用問題 引入 TypeScript是最近一段時間非常火的一個JavaScript的超集。說是超集,那麼自然TypeScript也完整的支持JavaScript語法,同時還提供了許多新特性。 那麼Webpack也能夠對

原创 webpack-dev-server的代理(proxy)

文章目錄引入proxy 引入 先看一個例子: import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import axios fro

原创 Webpack與瀏覽器緩存

想必大家都知道瀏覽器是有緩存的。瀏覽器緩存分爲強緩存和協商緩存,在命中強緩存時就不會像服務器請求數據。 那麼就產生了一個問題,在強緩存生效的時間內一旦服務器資源發生了變化該怎麼辦? 辦法也很簡單,修改資源的文件名。只要文件名不一樣

原创 Webpack配置文件初步

在命令行中輸入: npx webpack 需要打包的文件名 這樣便可以對文件進行打包,似乎並不需要所謂的配置文件。而實際上,並不是不需要配置文件,而是因爲Webpack自身有一個比較完善的默認配置。 Webpack的默認配置文件