博客 / 列表

起風了 - React.PureComponent深入瞭解機制及其原理

起因 用React.PureComponent時,更新state裏面的count用的方式是++this.state.count,但是意外的導致組件沒有重新render(本人用Hook組件較多,所以感到很疑惑) import React from 'react'; import { Button } from 'antd-mobile'; class DemoChildClass extends

react , setstate , component

起風了 - 封裝一個方法,獲取頁面url中的參數值?

封裝一個方法獲取頁面url參數,可作為框架基礎方法使用: //獲取url參數; 正則獲取url參數,包含hash[#]和search[?]兩種通用 export function getUrlQueryByName(param) { const reg = new RegExp('(^|)' + param + '=([^]*)(|$)'); const r = window.lo

regexp , 前端 , Javascript

起風了 - React setState、useState同步?異步?

React setState、useState到底是同步的,還是異步的? setState語法 用法1: this.setState({ // 數據更新 }) 用法2: this.setState((state, props) = { // 當前組件的state // 父級的state }, () = { // 數據更新之後 }) useState語法 用法1: const [n

react , 同步 , 異步 , 前端

起風了 - javascript中的esm是什麼?

esm是什麼? esm 是將 javascript 程序拆分成多個單獨模塊,並能按需導入的標準。和webpack,babel不同的是,esm 是 javascript 的標準功能,在瀏覽器端和 nodejs 中都已得到實現。使用 esm 的好處是瀏覽器可以最優化加載模塊,比使用庫更有效率。 esm 標準通過import, export語法實現模塊變量的導入和導出。 esm 模塊的特點 存在模塊

ecmascript , Javascript

起風了 - 如何快速查看頁面的佈局結構?

在前端頁面 UI 開發時,如何能快速查看頁面的結構佈局? html * { outline: 1px solid red !important; } outline 屬性不會增加元素的尺寸,比 border 要好。

佈局 , css3 , Css , 前端 , ui

起風了 - JavaScript函數柯里化

JavaScript函數柯里化 一、定義: 柯里化(Currying)是把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數,並且返回接受餘下的參數且返回結果的新函數的技術。 通過一個簡單的例子解釋一下: function add(a, b) { return a + b } add(1, 2); // 3 將函數add轉化為柯里化函數_add: function _

currying , 前端 , Javascript

起風了 - (移動端適配px轉rem)react配置rem插件lib-flexible和postcss-px2rem-exclude

1、安裝插件 yarn add lib-flexible postcss-px2rem-exclude //這個插件也要下,不然的話啓動項目的時候會報錯 yarn add react-app-rewire-postcss 2、修改config-overrides.js(如果沒有就新建,在項目根目錄) 在config-overrides.js文件裏重寫postcss,加入如下代碼 這文件將a

react , px2rem , rem , html5

起風了 - Mac使用Charles成功代理連接手機進行抓包!!!

操作指南 操作環境: 電腦系統:Mac OS 手機系統:iOS 12及以上/Android Charles版本:V4.5.6 第一步:安裝Charles證書到Mac 1、啓動Charles,選擇Help--SSL Proxying→Install Charles Root Certificate 2、此時會啓動“鑰匙串訪問”APP,並找到剛開安裝好的證書,證書名字:Charles

charles , 前端