- 1. the principles of component design
- 2. performance optimization
- 3. browser rendering
- 4. SVG
- 5. CSS
- 6. Storage
- 7. RegExp (regular expression)
- 8. Javascript
- 8.1. symbol and keyword
- 8.2. variable declaration
- 8.3. Array
- 8.4. scope
- 8.5. garbage collection
- 8.6. prototype
- 8.7. differences between vue and react
- 8.8. architectural patterns
- 8.9. closure
- 8.10. deep and shallow copy
- 8.11. event loop
- 8.12. debounce and throttle
- 8.13. breakpoint resume
- 8.14. messageChannel
- 8.15. generator
- 9. Typescript
- 10. React
- 11. web3
- 12. webpack
- 13. HTTP
- 14. NPM
- 15. Vscode
- 16. search patterns
- 17. terms
- 18. records
the principles of component design
- single responsibility principle. to compose complex components by smaller specialized components.
- conceals the construction of components, and only reveals the necessary information
- To ensure predictability and determinacy of components, always return the same output for a given input
- keep loose coupling, instead of tight coupling. Components should have little or no knowledge about others.
- composable. Composition is a way to combine components to create a bigger component
- reuseable
- pure or almost pure function which means no side effects and doesn’t depend on the environment or the global state, such as network or global variables.
- isolate the impure code from the pure
- straightforward to test
- a meaningful name. If a component’s usage is highly specific, its name may contain more words, like
<HeaderMenu>
<Header>
to judge a component’s level according to usage
1. Reading name and props; best
2. Consulting documentation; good
3. Exploring the code; admissible
4. Asking the author. avoid
performance optimization
- avid
reflow
andrepaint
- utilize
prefetch
andpreload
to enhance the execution order of js and prevent it from blocking HTML rendering - enable GZIP compression on the server
- minimize the number of DOM elements and keep the DOM structure as simple as possible
browser rendering
the rendering process
- browser obtains the IP address from the domain name through
DNS(domain name system) analysis
- send a http request to that IP address
- server receives the request and responds with html content
- the browser parses html string and create a dom tree, and then proceeds to analyzes CSS, forming CSS rule trees
- structure the rendering tree(only the nodes necessary for display)
GUI rendering thread and JS engine thread
GUI(graphical user interface) rendering thread and JS engine thread are mutual exclusive
. The rendering process pauses during the download, analysis, and execution of JS. When the browser encounters JS during the rendering process, it halts rendering to construct the rendering tree and passes control to the JS engine .
reflow and repaint
- reflow: When changes in DOM geometrical properties (like width, height, or display) affect the page layout or the position of other elements, the browser must recalculate the page’s layout.
- repaint: when the style(like color, background) of dom are changed
Ifrepaint
doesn’t affect the geometrical size of the DOM elements, thenreflow
isn’t required. However,reflow
will inevitably triggerrepaint
.
avid reflow
and repaint
as much as possible
- use
transform
instead ofpositive and top
- use
visibility
instead ofdisplay:none
, the former incur repaint only while the latter will change layout - instead of making multiple small changes to the DOM, try to make all necessary changes in one go.
- accessing properties like
offsetWidth
,offsetHeight
, orgetComputedStyle()
can trigger a reflow - use browser developer tools to monitor performance metrics like reflows, repaints, and rendering performance.
SVG
properties
width/height: define the size in the document
viewBox: first two number are min-x and min-y used to define the position, the other two are define the scale relative to width/height
1 | when the viewBox is same as width/height, then the dimension is 1. if it is smaller than width/height, then the dimension is larger than 1, and vice versa. |
path
M: move to
L: line to
H: draw a horizontal line
V: draw a vertical line
Z: close path, combine the start and the end
C: curve, x1 y1 x2 y2 x y, the last set x y specify where the line should end and the line start at the point where the last operation ended, the first two are control points.
1 | <svg className="selected-round-btm" viewBox="0 0 8 8" width="8" height="8" xmlns="http://www.w3.org/2000/svg"> |
S: smooth curveto
A: rx ry x-axis-rotation large-arc-flag sweep-flag x y
, draw an arc
rx ry
radius x and radius yx-axis-rotation
large-arc-flag
determines that the arc should be greater than or less than 180 degrees.sweep-flag
determines that the drawing direction is clockwise or anticlockwise.x y
the ending point calculated with angle, while the arc starting point is at three o’clock of a circle,circle center + radius = the arc starting point
1
2
3
4
5
6
7
8
9// get the ending point with an angle
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
const angleInRadians = (angleInDegrees * Math.PI) / 180.0 // the length of the arc
const largeArcFlag = angleInDegrees <= 180 ? "0" : "1";
const x = centerX + radius * Math.cos(angleInRadians)
const y = centerY + radius * Math.sin(angleInRadians)
return [radius, radius, largeArcFlag, 0, x, y]
}a 360-degree circle can’t be done by one arc, since the end point are same with the start point. but it consist of two arcs.
"M 140 80 A 60 60 0 0 0 20 80
+60 60 0 1 0 140 80
Q: x1 y1, x y, quadratic Bézier curve, to control the slope of two sides with one point, which is the first set
T: x y, smooth quadratic Bézier curveto, auto control the slope of two sides according to the last control point
filter
in && in2, SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint |
1.in
is the first input, andin2
is the second input, while the placing order is same with the layer order of PS
2.ifin
is not existed, then the value will be the previous filter input
- feBlend, to blend two layers ruled by a certain blending mode
in
in2
mode
- feComposite, to combine two input images
in
in2
operator
, compositing operations
CSS
stacking context 层叠上下文
Special properties like
z-index
will cause elements to form astacking context
, as those properties can change the render order of elements on the page if their values are set to something other thannone
position, opacity, filter, transform, detailed list of such special properties
text linear-gradient
1
2
3
4
5
6{
color: transparent;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(130deg,red,black);
}browsers (like chrome) can set a
minimum fontsize
which can’t be overthrow, buttransform: scale
can be a workaround1
2
3
4
5
6
7
8// set an unseen element for getting the minimum size
const minimumSize = Number.parseInt(window.getComputedStyle(document.getElementById("minimumSize"), null).getPropertyValue("font-size").replace(/px/, ""))
// generate different scales based on the minimumSize
//the app has been set to fit `window.devicePixelRatio` in this situation. so the fontsize takes rem as unit, and item * fontSize is purposed to get the original size.
const fontSizes = [1.2, 1.3, 1.4, 1.6, 2, 2.8].map((item) => {
const _s = item * fontSize < minimumSize ? item * fontSize / minimumSize : 1
return `--fontSize${item.toString().replace(/\./, "")}:${_s};`
}).join("")transform
don’t work for inline elementsuse
position: sticky
withflex layout
. the sticked elements may still moving when you scrolling.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<!-- set flex's width to the sum total of all the cell widths 250vw to fix the problem -->
<div class="container" style="overflow: auto">
<div class="flex"style="display: flex">
<div class="cell" style="width: 25vw;flex-shrink: 0;background: green; position: sticky; left: 0">cell</div>
<div class="cell" style="width: 25vw;flex-shrink: 0;background: green;position: sticky; left: 25vw">cell</div>
<div class="cell" style="width: 25vw;flex-shrink: 0;background: red">cell</div>
<div class="cell" style="width: 25vw;flex-shrink: 0;background: red">cell</div>
<div class="cell" style="width: 25vw;flex-shrink: 0;background: red">cell</div>
<div class="cell" style="width: 25vw;flex-shrink: 0;background: red">cell</div>
<div class="cell" style="width: 25vw;flex-shrink: 0;background: red">cell</div>
<div class="cell" style="width: 25vw;flex-shrink: 0;background: red">cell</div>
<div class="cell" style="width: 25vw;flex-shrink: 0;background: red">cell</div>
<div class="cell" style="width: 25vw;flex-shrink: 0;background: red">cell</div>
</div>
</div>text ellipsis
text-overflow: ellipsis
only applies to single line1
2
3
4
5.single {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}for multiple lines
, either useafter pseudo class
to display “…” after the text, or cut off the text through js
-webkit-box-reflect: right;
reflectvertical center layout
1 | { |
attr()
1
2
3.test::before {
content: '我的内容是' attr(text) '颜色是' attr(data-color);
}1
<div class="test" data-text="TEXT" data-color="red"></div>
shape-outside
make the adjoining inline-elements around itselfpseudo-class
:before
and:after
are used to add elements, also float cleaning, and cannot used with img/select/input:enabled
and:disabled
are used for customizing style of form according to status:checked
when checkbox or radio are chosen
selector
1 | p:first-of-type { } |
unit
vw / vh / px
vmin / vmax
1% of viewport’s smaller/larger dimension.em
relative to the parent’s font-sizerem
relative toHtml
font-sizefr
represents a fraction of the available space in a grid containerlh / rlh
Line height of the element / the root element..ex
x-height of element’s heightcap
the normal height of capital lettersch / ic
average Average character advance of a full width glyph in the element’s fontlvh / svh
, specified for the toolbar of mobile browsers
layout
adaptive design 自适应: multiple predefined layouts are created for different screen sizes
responsive design 响应式: use flexible grids and elements that automatically adjust and reflow based on the viewport size
物理像素:计算机硬件,真实屏幕的像素点
css像素:属于逻辑像素的一种
设备像素比(Device Pixel Ratio,DPR):物理像素与逻辑像素之比吗,比如iphone6物理像素是750 x1334,但实际逻辑像素是 375* 667,所以dpr = 2,这表示iphone6采用高清屏使用两个像素去渲染一个像素使画面更高清,iphone6 plus 甚至是dpr = 3
1px 问题:设计师的视觉稿是相对于物理像素750px,实现一个1px边框,但css逻辑像素是375px,border-width:0.5px 使用transform: scale(0.5)
% + meta
vw/vh/% + px + flex layout,响应式布局
flex + vw/v/%h布局,局部使用px
在跨设备类型的时候(pc <-> 手机 <-> 平板)使用媒体查询
rem ,响应式布局,动态设置 root 的 fontsize,子节点使用rem,和flexible不同的是可以根据pc、手机、平板的尺寸来设置比例使子节点计算方便
1 | var deviceWidth = document.documentElement.clientWidth |
flexible, self-adoption
模拟vw特性,动态的将页面宽度的1/10作为根节点的 fontsize,子节点使用rem就等于是按照页面比例计算
1 | var doc = document.documentElement |
高倍屏适配,修改了等比缩放视口的scale值,使得clientWidth变为物理像素尺寸,1物理像素等于1css像素,由原来的375=>750, media尺寸查询语句也同样需要修改
1 | var metaEL = document.querySelector('meta[name="viewport"]') |
Storage
cookie, 4kb, can set the expire time,
httpOnly = true
means this cookie is set by server and can only be changed by serverlocalStorage sessionStorage, maximum size 5MB
1
2
3
4localStorage.setItem('chooseId',JSON.stringify(this.$route.params))
localStorage.removeItem('chooseId')
localStorage.clear()
localStorage.key(index)indexedDB no size limits, it can be used like a database
caches, an object which include
cache instance
s, eachcache instance
can viewed as a storage region. the return type of all the methods ofcaches
orcache instance
ispromise
.methods which are mounted on
caches
are used for managingcache instance
s.caches
:keys
open
delete
has
match
- differ between
has
and match: has return boolean while match give you the data
if we want to store something, then we need to use
open
to get acache instance
where is our data staycache
instance:add
addAll
keys
delete
match
matchAll
put
1
2
3
4
5
6
7
8// differ between `add` and `put`: add can `fetch` and `store` the data automatically, but also because of automatically then we can't make changes on key and value to be stored
// so fetch + put = add
cache.add(request).then(function() {
// request has been added to the cache
});
fetch(url).then(function(response) {
return cache.put(url, response);
})when use
cache with service worker
, the data we stored is the rawresponse
returned byhttp
RegExp (regular expression)
1 | var re = new RegExp(“a”, "img") |
modifier
i
ignore uppercase and lowercase of lettersg
global matching, to search from the start to the end whatever how muchm
matching on multiple lines- es6
u
turn onUnicode mode
to deal with Unicode characters - es6
y
similar withg
, but it’s match work started form the beginning of the string- it’s effect is equal to add
^
at the beginning of a regexp, so it could regarded as a complement for thatg
couldn’t add^
sticky
, new property of RegExp, to know the regexp is addedy
or not
- it’s effect is equal to add
Properties
es6
regexp.flags
, get all the modifierses6
regexp.source
, get the regexp contextregexp.lastIndex
, allow you to define and get the index from where the next match work started1
2
3
4
5const REGEX = /a/g;
REGEX.lastIndex = 2; // to define the index
const match = REGEX.exec('match a string');
match.index // 6
REGEX.lastIndex // 7, to get the index
test(), is matching or not
1 | regExp.test(str) // boolean |
search()
1 | string.search(regExp) // return an index or -1 |
replace(), es6 replaceAll
1 | string.replace(regExp, replaceText) // return the replaced string |
exec()
1 | regExp.exec(string) // return an array of information which include lastIndex, allow you to match along the last position. |
1 | // use with while |
with named capture groups(具名组匹配), you can get the data of each group which declared by ()
1 | const regExp = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/ |
match(), es6 matchAll
1 | 'For more information, see Chapter 3.4.5.1'.match( /see (chapter \d+(\.\d)*)/i) // return an array of information |
symbols
PS Safari does not support ?!=n
?<=n
?<!=n
?:n
key | usage |
---|---|
() |
Parentheses, to group regular expressions |
[] |
match any character within the brackets |
^ $ |
match from the start or the end of the string |
[^a] |
match string which no ”a“ |
{n,m} |
the display times > n and < m |
{n,} |
the display times > n |
{,m} |
the display times < m |
* |
equal to {0,} |
+ |
equal to {1,} |
? |
equal to {,1}, /.*?(\d)/, when ? is used with greed mode, it means to exclude a specific format |
| | a|b === a or b |
. |
equal to {1,} |
.* |
greedy mode |
.*? |
the regex engine will, at every step it matches text into the “.” attempt to match whatever make come after the “.*?” |
\d |
equal to [0-9] |
\D |
equal to [^0-9] |
\w |
equal to [a-zA-Z_] |
\W |
equal to [^/w] |
\s |
equal to [ \f\n\r\t\v] (换页,enter,空格,tab,垂直制表符) , matching all the empty characters |
\S |
equal to [^/s] |
/S/s |
all the characters |
(.|\n)* | to match any characters across multiple line |
?=n |
match string but don’t get, the string after which is n |
?!=n |
match string but don’t get, the string after which isn’t n |
?<=n |
(incompatible with safari) match string but don’t get, the string before which is n |
?<!=n |
match string but don’t get, the string before which isn’t n |
?:n |
match string but don’t get |
examples
to match every character except ,;
1 | /[^,;]+/ |
to match a string, stop matching until a specific format is encountered
1 | // ?(?=hello) match string but don't get |
verify float number, two standards judged by |
1 | /^(([0-9]+\.?[0-9]+)|([0-9]*))$/.test("5.") |
get an array of date number arranged by [year, month, day, hour, minute, second]
1 | new Date().toLocaleString("zh").match(/[0-9]*/g).filter((el) => el).map(el => (el.length < 2 ? "0" : "") + el) |
- extract the type in the string returned by
Object.prototype.toString.call
1 | /(?<=\[object ).*(?=])/.exec(Object.prototype.toString.call({})) |
Javascript
symbol and keyword
keyword | function |
---|---|
=~ |
按位非var num1=~25;//-26 值反一次再减一 |
6%4 |
取余, c%2 !== 0 |
~~ |
取整 ~~(6 / 4) // 1 ~~(9 / 4) // 2 |
yield next yield* |
to stop or resume a generate function, yield* 加入另一个可迭代的对象 |
es6 ?. |
optional chain, stop running when null or undefined is encountered |
es6 ?? |
null ?? 4; 4 ?? 5 the right value will be returned when the left value is null or undefined |
es6 &&= |
a &&= 1 === a && (a=1) // if a is existed then assign 1 to it |
es6 ??= |
a ??= 1 === a ?? (a=1) // if a is null or undefined then assign 1 to it |
es6 ** |
指数运算符 2 ** 3 // 8 b **= 3; // equal to b = b * b * b; |
es6 symbol |
data type: designed to prevent conflicts in property naming |
delete obj.a delete an object’s own property without affecting properties that are part of the object’s prototype chain
in: to get know whether a property or an item exists
1
2var arr = [1]; console.log(0 in arr); // true
var arr = { a: 4 }; console.log('a' in arr); // truees6
… spread syntax to expand an iterable such as an array expression or string1
2
3
4
5
6
7
8
9// express rest arguments
const bar = (...args) => args
// to concat or insert items
{ ...obj1, ...obj2 }
[...iterableObj, '4', 'five', 6]
// Applying with new operator
new Date(...[1970, 0, 1])while, the expression inside the brackets can be an assigning expression
1
2
3
4
5
6var bb = 1
while (aa = bb) { // assigning the value of bb to aa, and judge aa is false or not
console.log(aa)
bb++
if (bb === 5) bb = null // bb = null, then aa = null
}break continue return,
break
is used inswitch/while/if/for
to break one layer of the loop1
2
3
4for (let i = 0; i < 5; i++) {
if (i === 3) continue
console.log(i)
}es6
set similar to Array, but each item inset
is unique1
2
3const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // the length is 5, and the repeated value aren't be counted
items.add(6) // add itemes6
map similar toset
, butkey: value
structure like anobject
. thekey
of anobject
isstring
, while thekey
of amap
can be any type.1
2
3
4
5const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o)
m.size // 1es6
WeakMap && WeakSet, all the properties of the two are shallow copied(weak reference), if anobject
are referenced only byWeakSet
, then thisobject
will be deleted by Garbage Collectionexport && import && export default
variable declaration
var
if a
var
variable is not declared in a function scope, then it is aglobal object
and is mounted onwindow
can be re-declared in a same scope
1
2
3
4
5var b = 1
var b = 1
let c = 10
let c = 20 // Identifier 'b' has already been declaredvar
variables can be used before declare,var
declaration will be raising to the first line when engine is running, even the variable is declared in a block scope1
2
3
4console.log(a) // warning
let a = 1
console.log(b) // undefined
var b = 1
let, const
let
is used to declare a variable.const
declares a constant with simultaneous assignment and declaration, and its value cannot be reassigned. For reference type data, the value maintains the memory location unchanged.no variable increase
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20if (true) {
let m = 'block scope';
const n = 'block scope 2';
var k = 'global scope';
console.log(m); // block scope
console.log(n); // block scope 2
console.log(k); // global scope
}
console.log(m); // Reference Error
console.log(n); // Reference Error
console.log(k); // global scope
function a() {
var a = 1
if (a == 1) let a = 2
}
function a() {
let a = 1
if (a == 1) var a = 2 // warning
}a variable cannot be declared with the same name as a function’s arguments.
1
2(function func(arg) { var arg })()
(function func(arg) { let arg })() // SyntaxError
es6 shorthand
1 | const a = { |
iterate
for...in...
iterate object’s key and array’s indexforEach
can’t jump out byreturn
,forEach
for...of...
iterate value and can’t be used on Object
1 | Object.keys(obj) // without Symbol |
Instance’s Properties
1 | // Object.create(null) will create an object which does not inherit from Object.prototype, so the methods of Object are inaccessible. |
Object’s Properties
es6
Object.values({})
Object.keys({})
es6
Object.assign()
, copy the properties of the arguments to the first argumentes6
Object.entries({})
Object.fromEntries([])
transform object to array and vice visa1
2
3const obj = {a: 'someString', b: 42}
Object.entries(obj) // [['a', 'someString'], ['b', 42]]
Object.fromEntries(Object.entries(obj)) // {a: 'someString', b: 42}es6
Object.is(value1, value2)
compare whether two values are same, can compare objects by comparing they reference. almost same as===
, but there has two differences:1
2
3
4
5+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // trueObject.prototype.toString.call()
get data’s typees6
Object.getOwnPropertyDescriptors
es6
Object.setPrototypeOf()
Object.getPrototypeOf()
set and get the prototype of an object
JSON
JSON.parse(string)
JSON.stringify(obj)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25JSON.stringify(object: any, replacer: (key: string, value: any) => any, space: string)
const foo = {
foundation: "Mozilla",
model: "box",
week: 45,
transport: "car",
month: 7,
obj: {
a: 2,
b:[7,8]
}
};
// if replacer is a function, replacer will be called on each value to-string process
// ps: the value of the first call is the target object
JSON.stringify(foo, (key, value) => {
console.log(key, value)
if (typeof value === "number") {
return "number"
}
return value
}) // '{"foundation":"Mozilla","model":"box","week":"number","transport":"car"}'
// if replacer is an array and all the items are string, the resulting string will only keeps the {key: value} which's key is listed in the replacer
JSON.stringify(foo, ["month", "obj", "a"]); //'{"month":7,"obj":{"a":2}}'
Array
includes(item)
,item
exists or notlastIndexOf
,indexOf
returnindex
at(index)
,index
can be negative, return item of the given index1
2
3const arr = [1, 2, 3, 4, 5];
arr.at(2) // 2
arr.at(-2) // 4forEach
no return and cannot break the loop
if anitem
is deleted during the loop, the items after it will be skippedevery
all items return true => return true, any one return false => return false and break the loopsome
any item return true => true, no one return true => falsefind
findLast
|findIndex
|findLastIndex
any item return true => return the item or index(findLast return the last one),IE 11 doesn’t supportfilter
return an array constituted by items which is returned truemap
return an array constituted by the return data of the functionreduce
reduceRight
, get an accumulation from an array, the latter is executed by the order of right to left1
[1,2,3].reduce((accumulator, currentValue, currentIndex, Array) => accumulator + currentValue)
reverse
reverse the order of an arrayjoin
fill(value, start, end)
pop
/shift
remove the first / last item of an array, and return the removed itemunshift
/push
add item to the start / end of an array, and return the current length of an arraysplice
slice
, three parameters: start index, delete count, items which need to add. return the removed itemssplice
changes the original array, whileslice
create new oneconcat
concat two or more arrays, and return a new array. the items of new array areshallow copied
sort
flat
1
2
3
4// 数组降维,递归地将数组展平到指定的深度,默认为1 const array = [1, [2, [3]]];
array.flat(); // → [1, 2, [3]]
array.flat(Infinity); // → [1, 2, 3]
[2, 3, 4].flatMap((x) => [x, x * 2]); // → [2, 4, 3, 6, 4, 8]set
has(value)
value exists or notadd(value)
return the array itselfdelete(value)
boolean, delete one itemclear()
no return, clean all items
1
2[...new Set(array)] // repeated items will be deleted
Array.from(new Set(array)) // set to array
scope
scope types
global scope
- defined at the external of the outmost function
- declared without
var
,let
andconst
- belonging to
window
ES6 Module scope
1
2
3
4
5
6
7// lib.js
var a = "a";
export var b = "b";
// main.js
import {b} from "lib";
console.log(a); // error
console.log(b); // "b"function or local scope, a variable is declared within a function, so it can’t be accessed from the outside.
block scope,
if / switch / while / for
create a block scope. a variable which is defined bylet / const
is stay in block scopestatic scope, when looking a variable, the engine will go to the scope in which the variable was created
1
2
3
4
5
6
7var x = 10
function fn() { console.log(x); }
function show(f) {
var x = 20;
fn() //10
}
show(fn);nested scope, a scope can be nested inside another scope.
scope chain
when the JavaScript engine try to find a variable, first it will seek in the current scope, if there is no result then it will go to the parent’s scope. finding layer by layer, that is scope chain
.
1 | var a = 100 |
garbage collection
FinalizationRegistry
listen to the garbage-collect event
FinalizationRegistry
to register an obj and invoke a callback after the obj is garbage-collected
1 | const registry = new FinalizationRegistry(heldValue => { |
Stale closure
a stale closure captures a variable whose value is outdated
createIncrement
function returns two functions,increment
andlog
. The former responsible for value increasing. the latter logs aconst
, whose value is fixed since it defined, then every time call thelog
fun, it getsmessage
which has a outdated value.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16function createIncrement(incBy) {
let value = 0;
function increment() {
value += incBy;
console.log(value);
}
const message = `Current value is ${value}`;
function log() {
console.log(message);
}
return [increment, log];
}
const [increment, log] = createIncrement(1);
increment(); // 1
increment(); // 2
log(); // Current value is 0When using
setTimeout
andsetInterval
, the function delays execution, but any variables saved within the function retain their values as they were at the time the function was defined. This means that if variables change during the delay time, the function only accesses the old values of those variables.
prototype
every object has a
prototype
, from which objects inherit properties and methodsan instance inherits
prototype
fromconstructor
, which is placed on the__proto__
a
constructor
has aprototype
which includes two propertiesconstructor
andproto
. additionally, it inheritproto
fromObject.prototype
- the
prototype.constructor
refer to the default constructor - even all the built-in functions such as Object, Function, Array、RegExp、Date、Boolean、Number、String , the
prototype.proto
of them point to theObject.prototype
, that means they inherited are fromObject
, andObject.prototype.proto
refer to null.
1
2
3Person.prototype.constructor === Person // Person is a constructor, Person.prototype.constructor point to the "constructor" function self
person01.__proto__ == Person.prototype // person01 is an instance, person01.__proto__ point to a place same as Person.prototype
Array.prototype.__proto__ == Object.prototype == Object.prototype.__proto__ = null- the
property chain
when we access an object
‘s property, first the engine will try to find the property within the object itself. if it doesn’t find, it then look at the object.__proto__
. if it still doesn’t find , it continues up the __proto__
chain, checking each subsequent __proto__
. until it find Object.prototype
, in which the prototype
is null, then the engine can conclude that the property doesn’t exist.
diff between constructor and normal function
a
constructor
usually doesn’t usereturn
keyword, becausethis
of aconstructor
will be used as the result ofnew
keyword.when a
constructor
returns an object, that object will be used as the result returned by thenew
keyword. otherwise, if the result is a primitive type, thenthis
will be returned by thenew
keyword.1
2
3
4
5
6
7function Person(name) {
this.name = name;
return "Hello"; // a primitive value
}
const person1 = new Person("Alice");
console.log(person1); // Output: Person { name: "Alice" }by the first rule,
this
andnew
are used in a constructor but not in a normal functionwhat does NEW do?
- create an Object
- bind
this
of the current scope to that object - copy the prototype from the constructor, and placed it in the
object._proto_
- execute the code inside the constructor, and return the object
Inheritance
- create a child object classes which will inherit features from another class
- OO => object oriented programming
- favor object composition over inheritance
- concatenative inheritance, inherit features from another object by copying the source objects properties
- Object.assign()
- … spread syntax
- bind, call and apply(can receive an array). binding “this” to a function
1 | let beBound = { a: 1 } |
prototype delegation
new
constructor- functional inheritance / factory function. It is not a constructor or class. Instead, it operates by generating an object from a factory and extending the produced object by assigning properties to it through concatenative inheritance.
- class extend / sub-classing.
inherit everything from a class, can’t choose what you wanted
this initialization by calling the parent’s constructor with super() and can pass arguments to the parent, while in the constructor function that the new keyword does the initialization automatically.
differences between vue and react
both of them are component-based architecture
Vue
- considered easier to learn for beginners due to its simpler syntax and clear documentation.
- use a Single File Component (SFC) which contains a template section for HTML markup, a script section for JavaScript logic, and a style section for CSS.
- has a growing community, most libraries are developed by the official team.
- has a powerful two-way data binding system, keeping data and the UI in sync.
1 | <!-- The input value is bound to the 'msg' data property --> |
React
- has a steeper learning curve due to its extensive ecosystem and more complex concepts.
- uses JSX (JavaScript XML), this allows to write HTML-like code in js files. JSX may be more powerful and expressive.
- has a larger ecosystem and community support, with many third-party libraries and tools available.
- follows a one-way data flow, explicitly manage state and re-render components when needed.
the differences between class component and function component
no
this
issues in function components, you don’t have to do scope bondingcode lesser with function component, but worse maintaining
doesn’t need to manage state and life cycle
architectural patterns
MVC
- Model - View - Controller
model
contains data model, and describes how the data can be changed and manipulated.view
is UI components. it receives data from the model (via the controller) and display it to the user.controller
sits betweenmodel
andview
, processing the data from themodel
and passing back to theview
for rendering.- view and model can interact with each other directly, so it’s coupled.
MVVM
- Model – View – ViewModel
view
andmodel
are same as inMVC
ViewModel
sits below the UI layer, acts as a bridge between the View and Model. Unlike the Controller in MVC, it doesn’t handle user interactions directly. it binds data between the View and Model, and ensures that the View reflects the state of the Model and vice versa.view
andmodel
can’t interact with each other, it’s decoupled.- vue and react can be vm or mvvm, early Angular is mvc.
active view and passive view
- the later only outputs UI and doesn’t accept user’s input, contains zero logic
- the former contains events, data binging, and behaviors
closure
closure is a combination created by binding a function to the lexical environment. it allows you to access the outside scope from the inner of a function.
data privacy
. it means that you can’t access the data of the inner scope from the outside.privileged methods
. the methods exposed by the function are privileged because they can access data in both the inner scope and the outer scope.stateful function
. a state is a snapshot of the current environment, every change will take a picture of the current environment.1
2
3
4
5
6
7
8
9var func = () => {
let a = 3
return (b) => {
a = ++ a
return b * a
}
}
let closure = func()
closure(4) // 16partial application
refers to the process of fixing a number of arguments to a function, producing another function that takes fewer arguments than the original function. it takes advantage of closure scope in order to fix arguments.1
2
3
4
5const partialApply = (fn, ...fixedArgs) => {
return function (...remainingArgs) {
return fn.apply(this, fixedArgs.concat(remainingArgs))
}
}Function Factories
, to generate functions with pre-configured behavior or to create multiple functions with similar functionality. like debounce functionMemoization
, to cache the results of expensive function calls
deep and shallow copy
basic data types: data are stored in
stack
reference data types: data are stored in
heap
, whilestack
only have object’s referenceshallow copy
: copy the reference of objectdeep copy
: copy datathe following methods deep copy only the first layer of an object.
1
2
3
4Object.assign({}, state)
{...state}
Array.prototype.concat()
Array.prototype.slice()
completely deep copy
structuredClone()
creates a deep clone of a given value(include circular references). to cloneDOM element
File
,Map
,Set
, and functions that are not part of the built-in objects, will result in an error or an incomplete copyJSON.parse(JSON.stringify())
, some complex types will be translated into string:Dates
,functions
,undefined
,Infinity
,RegExps
,Maps
,Sets
,Blobs
,FileLists
,ImageData
,sparse Arrays
,Typed Arrays
undefined
will be ignoredan object with circular references(properties are refer to each other) can’t be converted
1
2
3
4
5
6
7
8
9
10
11
12let obj = {
a: 1,
b: {
c: 2,
d: 3,
},
f: undefined,
}
obj.c = obj.b
obj.e = obj.a
obj.b.c = obj.c
obj.b.d = obj.b
MessageChannel
, data that is deliveredMessageChannel
are deep copied. but delivering a function will cause error1
2
3
4
5
6
7
8
9
10
11function deepCopy(obj) {
return new Promise((resolve) => {
const { port1, port2 } = new MessageChannel()
port2.onmessage = (ev) => resolve(ev.data)
port1.postMessage(obj)
})
}
deepCopy(obj).then((copy) => {
console.log(copy);
})
event loop
Heap and Stack?
Heap
refers to where objects are storedStack
refers to where functions are waiting to execute.synchronous and asynchronous
they are two types of js tasks.synchronous task
constituteexecution context stack(执行栈)
in theMain-Thread
.asynchronous task
wait in theTask Queue
.Event Loop
after all the tasks ofTask Queue
are completed, the engine continuously scanstask queue
to find tasks that can transition waiting status to execution. once such tasks are found, the engine pushes it intoexecution context stack
. this process where JavaScript engine constantly scans for tasks is called asEvent Loop
.Call Stack
every call of function will leave aCall Frame(调用帧)
, which keeps the inner information about function including variables and the location where the function called, those information will be deleted after the function is completed.1
2
3
4
5// put C into stack => B in => A in => A out => B out => C out
function funA() { console.log('funA') };
function funB() { funA() }
function funC() { funB() }
funC()Task queue
have been divided into two typesMacro
andMicro
Macro tasks
includesetImmediate(Deprecated)
/setTimeout
/setInterval
/MessageChannel
/requestAnimationFrame
/UI render
/I/O in node.js
Micro tasks
include theonerror
andthen callback of Promise
.setImmediate -> MessageChannel -> setTimeout 0
the engine checks
Macro Task
first and theMicro Task
second.Promise initialize and resolve are synchronous
.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20setTimeout(function () {
console.log(1)
}, 0)
var p1 = new Promise(function (resolve, reject) {
console.log(2)
setTimeout(function () {
console.log(4)
resolve(1)
}, 0)
})
setTimeout(function () {
console.log(3)
}, 0)
for (var i = 0; i < 5; i++) {
;(function (j) {
p1.then(function (value) {
console.log("promise then - " + j)
})
})(i)
}
async
await
, look at the following example:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20async function async1(){
console.log('async1 start')
await async2()
console.log('async1 end')
}
async function async2(){
console.log('async2')
}
console.log('script start')
setTimeout(function(){
console.log('setTimeout')
},0)
async1();
new Promise(function(resolve){
console.log('promise1')
resolve();
}).then(function(){
console.log('promise2')
})
console.log('script end')async1()
doesn’t haveawait
prefix,async1
will be translated by v8 like:1
2
3
4
5
6
7
8// `async2` is Promise initialization, so it‘s a synchronous
// the code after `await` will be put in `then` callback
function async1(){
console.log('async1 start')
Promise.resolve(async2).then(()=>{
console.log('async1 end')
})
}Tail Call 尾调用
refers to calling another function “at the end” of a function’s execution.1
function a(x) { return b(x) }
b
is aTail Call
. givenCall Stack
, when a function is called, it creates aCall Frame
that holds internal information until the call is completed. whileTail Call
is the final action, theCall Frame
will be kept untilTail Call
is finished.- optimize
Tail Call
to reduce stack space usage, is calledTail call optimization
.
Tail Recursion
due tofcall frame
,Recursion
often consumes a significant amount of memory and resultsstack overflow
in languages that supportTail call optimization
,Tail Recursion
can be used to avoid such issues1
2
3
4
5
6
7// the recursive call is the last operation performed by the function
// the call frame associated with that recursive call can be discarded or reused.
function factorial(n, acc = 1) {
if (n === 0) return acc;
return factorial(n - 1, n * acc); // Tail recursion
}
console.log(factorial(5)); // Output: 120
debounce and throttle
debounce
. a function can be executed when it is not called during a specific time1
2
3
4
5
6
7
8
9
10
11// execute debounce => got a function which bound with the debounce scope
// every time the instance executed that will clean and reassign the timer
const debounce = (func, delay) => {
let timer
return function () {
const context = this, args = arguments
clearTimeout(timer) // to clean before reassign
timer = setTimeout(() => func.apply(context, args), delay)
}
}
const instance = debounce(function () { console.log("executing") }, 3000)throttle
. a function can be executed only when the time is up1
2
3
4
5
6
7
8
9
10
11
12
13
14// execute throttle => got a function which bound with the throttle scope
//when the isExpired is true, that means that the function can be executed and when it executed, then change the isExpired's state to false and set a time to change back
const throttle = (func, delay) => {
let isExpired = true
return function () {
const context = this
const args = arguments
if (isExpired === false) return
func.apply(context, args)
isExpired = false
setTimeout(() => isExpired = true, delay)
}
}
const instance = throttle(function () { console.log("executing") }, 3000)
breakpoint resume
web: fileReader + slice + FormData
server: createWriteStream + createReadStream
messageChannel
- to communicate between two
iframe
s /web worker
s /js module
s - deep copy
generator
use generator
to simulate async function
1 | function run(fn: any) { |
Typescript
references
setting tsconfig for specific file
diff with js
pro
- object-orient langua==ge static type checking. it can find low level bugs, like spelling mistake, incorrect or instanceof variable properties
- type infer.
- optional parameters
- enum support
- better support in IDE, like intelliSense of editor, auto-supplement
- the type files can increase code reading ability, and make the project maintaining easer
.d.ts
can be viewed as specifications- to identify incompatible interfaces when the field name changed
con
- compiling step is required, and it may take a long time.
- abstract class is not support
- definition files for a third library is required
- pollutes the code with type gymnastics
type judgement
Generics
keyof
typeof
indexed access:
User["name]
map types, use
-
or+
to remove readonly or optional modifier1
2
3
4
5
6
7
8
9
10type OptionsFlags<Type> = {
[Property in keyof Type]: Type[Property]
}
// change all readonly or optional properties to normal
type CreateMutable<Type> = {
-readonly [Property in keyof Type]: Type[Property];
};
type Concrete<Type> = {
[Property in keyof Type]-?: Type[Property];
};
Diff of null
and undefined
null
means an absence of valueundefined
means not initialized
Diff of .ts
and .d.ts
.d.ts
file is a declaration file, and would not be complied as ajs
file- in a
.d.ts
file, if we want it act as a global declaration, then we have to use/// Triple-Slash Directives
to import dependencies /// <reference types="node" />
is used for importing an outside module, while/// <reference types="./global.d.ts" />
is for importing a localdeclaration
file
- in a
Diff of type
and interface
type
is used to declare a type alias, act like a variable. while interface introduce a named object type.1
2
3// get the type of a variable to deduct (a part) of a payment from (the total)
let div = document.createElement("div")
type B = typeof divAdding new fields to an existing interface, but a type cannot be changed after being created
1
2
3
4
5
6
7
8interface User {
name: string;
age: number;
}
interface User {
sex: string;
}
/* { name: string; age: number; sex: string } */
features
circular references
1
2interface LocalRes<T> { [x: string]: T }
type LocalResPackage = LocalRes<LocalResPackage | string>new
describe the shape of a constructorabstract
to mark a class withabstract
, means that the class is only meant to be extended from, can’t be used directly1
2
3
4
5
6
7
8abstract class Shape {
abstract getArea(): number;
}
new Shape(); // error Cannot create an instance of an abstract class.
class Square extends Shape {}
new Square(3) // rightextends
conditional typesSomeType extends OtherType ? TrueType : FalseType;
1
2
3// if Dog extends from Animal, then Example = number, otherwise Example = string
type Example = Dog extends Animal ? number : string;infer
can be used to unpack type, to get the item’s type of an array, the return value’s type or the parameter’s type of a function1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17// if T is a function ? the return value of the function : any
type Unpack<T> = T extends (...args: any[]) => infer R ? R : any;
// if T is an Array ? R : T
type Unpack<T> = T extends Array<infer R> ? R : T
// if R is Reducer ? Reducer's first parameter S : never
type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never;
type Reducer<S, A> = (prevState: S, action: A) => S;
// get the parameter type of a constructor
abstract class AbstractClass {
constructor(a: string, b: number) { }
}
export type InferAbstract<T> = T extends abstract new (...args: infer Args) => infer _ ? Args : never; // new a function which return a value, infer the parameter as Args, mark the value as abstract class, if T is a abstract class ? Args : never
type Result = InferAbstract<typeof AbstractClass> // [a: string, b: number]decorators, use the form
@expression
, where the expression must infer to a function.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19function first() {
console.log("first(): factory evaluated");
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log("first(): called");
};
}
function second() {
console.log("second(): factory evaluated");
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log("second(): called");
};
}
class ExampleClass {
@first()
@second()
method() {}
}Record
1
2
3
4
5
6type AnyObject = Record<string, any>
type Coord = Record<"x" | "y", number>
type Coord = {
x: number,
y: number,e
}Readonly
Partial
Required
: all the properties are Readonly or selectable or required1
2
3
4
5type Coord = Partial<Record<"x" | "y", number>>
type Coord = {
x?: number,
y?: number,
}Pick
omit
: to pick or omit some properties from a given type1
2
3type Coord = Record<"x" | "y", number>
type CoordX = Pick<Coord, "x">
type CoordX = Omit<Coord, "x">ReturnType
Parameters
, the former is used for getting the output of a function, while the later is used for a function’s input1
2let timer: ReturnType<typeof setTimeout>
Parameters<(props: Event) => void>typeof
1
2const zed: Hero = { name: "影流之主", skill: "影子" };
type LOL = typeof zed; // type LOL = Herokeyof
collecting key1
2
3
4interface Person { name: string; age: number; location: string; }
type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[]; // number | "length" | "push"|"concat" | ...
type K3 = keyof { [x: string]: Person }; // string | numberenums
1
2
3
4
5
6
7
8
9
10
11enum Themes {
default = "_default",
thinkuem = "_thinkuem",
safeuem = "_safeuem",
}
// collect all the values of an enum, but the types of all the values will be inferred as string, even some values are number or string
type ThemesVal = `${Themes}`
// generate a interface
type ThemesVal = Record<Themes, string>
// collect all the keys of a enum
type ThemesVal = keyof typeof Themestemplate literal type,a set of every possible string literal that could be represented by each union member
1
2
3type a = 1 | 2 | 3
type b = 4 | 5 | 6
type ab = `${a}_${b}` // "1_4" | "1_5" | "1_6" | "2_4" | "2_5" | "2_6" | "3_4" | "3_5" | "3_6"template literal
has four convenient featuresUppercase
Lowercase
Capitalize
Uncapitalize
1
2
3type PropEventSource<Type> = {
on(eventName: `${string & keyof Type}Changed`, callback: (newValue: any) => void): void;
};type assertion,
as
or<>
syntax1
2
3let value: unknown = "Foo";
let len: number = (value as string).length;
let len: number = (<string>value).length;is
1
2
3export function foo(arg: string): arg is MyType {
return ...
}in
1
console.log('model' in car); // boolean
this
1
2
3
4
5
6
7class Box<T> {
value?: T;
hasValue(): this is { value: T } {
return this.value !== undefined;
}
}as const
1
2
3
4
5
6let x = [0, 1] as const; // let x: [0,1]
// another write pattern: let x = <const>[0, 1];
let x = [0,1] // let x: number[]
let y = [10, 20] as const; // Type 'readonly [10, 20]'
let z = { text: "hello" } as const; // Type '{ readonly text: "hello" }'any
extends object
instead ofany
when reference to an objectvoid
is used when a function’s output isnull
orundefined
, if a fun does not usereturn
keyword then its value isundefined
unknown
is a type-safe of any type. you can narrow downunknow
to any type by type assertionnever
is used when a function can’t end which means it can’t return a value even an undefined. to express an empty object1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {
return o[name]
}
let foo: unknown = "hello";
let bar: string = foo as string;
function login(data: LoginForm): void {}
function login(data: LoginForm): never {
while (true) {}
}
function login(data: LoginForm): never {
throw new Error("error");
}
type EmptyObject = Record<string, never>map types
, to generate a type According to a map object, and can be agenerics
1
2
3type OptionsFlags<Type> = {
[Property in keyof Type]: boolean;
};index access
for looking up a specific property of a type1
type Age = Person["age"]
generics
generate a type with a specific params1
2
3
4function identity<T>(arg: T): T {
return arg
}
let myIdentity: <Type>(arg: Type) => Type = identityimplements
, to check that whether a class is satisfied the contract specified by one or above interfaces1
2
3
4
5
6
7
8
9interface Runnable {
run(): void;
}
class Job implements Runnable {
run() {
console.log("running the scheduled job!");
}
}triple slash directives, to introduce other files in the compiling process
1
/// <reference path="..." />
class modifiers
- public
- protected: All the members of the class and its child classes can access them, But not the instance of the class.
- private: Only the members of the class can access them.
useful tricks
reduce
method needs to provide the initial type and the return type when the return type is not same with the type of array item1
reduce< [string, Lan], { [k: string]: Lan }>((a, c) => {})
refer to React component
1
2new() => React.Component<any, any>
typeof React.Componentpromise type
, the argument’s type ofresolve
is number, while the argument’s type ofreject
is infer to any1
2
3
4
5function test(arg: string): Promise<number> {
return new Promise<number>((resolve, reject) => {
arg === "a" ? resolve(1) : reject("1");
});
}the resolve type of promise
1
type resolve = Awaited<ReturnType<typeof drawSlogan>>
to override a property of a interface extended
1
2
3interface ColorPickerProps extends Omit<BasicProps<string>, "change"> {
change: import("react-color").ColorChangeHandler
}use
map
andliteral
to create new property names1
2
3type Getters<Type> = {
[Property in keyof Type as `get${Capitalize<string & Property>}`]: () => Type[Property]
};to extend html attributes
1
2
3
4
5declare module "react" {
interface DOMAttributes<T> {
name?: string
}
}
React
life cycle
Mount Phase
initialize
constructor
inside the functionbefore render
getDerivedStateFromProps
, React will call it right before calling render, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.
inside the function to compare the state and then return what you want1
2
3
4
5
6
7
8
9
10
11function ScrollView({row}) {
const [isScrollingDown, setIsScrollingDown] = useState(false);
const [prevRow, setPrevRow] = useState(null);
if (row !== prevRow) {
setIsScrollingDown(prevRow !== null && row > prevRow);
setPrevRow(row);
}
return `Scrolling down: ${isScrollingDown}`;
}rendering
after render
componentDidMount
useEffect()
with empty dependency array
Update Phase
getDerivedStateFromProps
shouldComponentUpdate
useuseMemo
to shallowly compare1
2
3
4
5// MyComponent will only re-render if the value prop changes
const MyComponent = React.memo(({ value }) => {
// Component logic
return <div>{value}</div>;
});render
getSnapshotBeforeUpdate
(1.contain state before update and after update,2.used to comparative calculations,3. in the end, it could return a value as the third argument of - DidUpdate)
useuseRef
to get the old and new statecomponentDidUpdate
useEffect()
with watched data
unmount stage
componentWillUnmount
the returned function ofuseEffect()
Error Handling
getDerivedStateFromError(error)
: when there is an error during rendering, allowing the component to capture an error in its children.componentDidCatch(error, info)
: when an error has been thrown by a descendant component. It is used to log error information and display a fallback UI.
change view
- setState()
- even an empty object like
this.setState({})
will also trigger a new update cycle - not a async method
- when we call a
setState
, multiple calls ofsetState
will be merged to one call, so the data will not update immediately. we can use callback to get the updated data. - we can use
setTimeout
or native events to step over React setting, to achieve a sync response.
- even an empty object like
1 | componentDidMount(){ |
useState()
useReducer()
hookscontext
, this is shallowly compareforceUpdate()
, only support in class component and it will skipshouldComponentUpdate()
dispatch()
in redux- to change dom by
ref
ornative dom handlers
components conversation
- parent to children: props
- children to parent:callbacks inside the parent props
- between brother: find the common parent node, through the parent by the above methods
- cross layer: by context
- redux
Reconciliation algorithm
it is used to diff one tree with another to determine which parts need to be changed. also called
differ algorithm
key
when an array re-rendering, React will check each list item according to the last render. if an inexistent item of the last render is found in the current render, then react will create an new element. if an item of the last render is altered in the current render, then react will delete the old one and create a new one.
if we use index
as key
, the key will be changed as the array’s order changed
high order component
- HOC is a function, accepts a component and other arguments, return a new component which should keep similar interface with the original one.
- HOC’s name begins with
with
, likewithButton
1 | type HOC = (component: React.component, props) => React.component |
features
- it totally control the component, and add new features to it, like make the name of the data props.
- it can unify data source, inform the component to change when the data of data-center change.
- it render different components based on status like after login, therefore it could avoid to set multiple routers.
- when a function needed in multiple components. a different way from importing the function in different components is to apply the function to > different components in HOC.
- if you want to change the component received in HOC, the better way is to return a composition of a new component and the component received, > rather than to change the component received directly.
- container and component. the former deals with data and props, the later receive props form container and only responsible for rendering.
Render Props
- it is a mode, a component with
a callback
which accepts component’s data and return React elements - tips: try not use
Render Props
withpureComponent
, becausethis callback
will return a new value after parent re-render. whilepureComponent
is shadow compare for reduce the times of children re-render, but withRender Props
the result of compare will always be false.
1 | <DataProvider render={data => ( |
render prop
is kind of a simplyHOC
1 | <Mouse render={mouse => <Component {...this.props} mouse={mouse} />}/> |
ref
info
- ref is a way for accessing dom
- create ref by
React.createRef()
anduseRef()
hook - it is not support to access
ref
directly on afunction component
which does not have ref instance.
callback ref
- differ from
React.createRef()
, pass a function to components is also allowed - a better way is use with
useCallback()
hook, then it wouldn’t be executed every time after component updated
1 | const inputRef = (node) => { |
ref forwarding
- Ref forwarding lets components opt into exposing any child component’s ref as their own.
- we can customize the data that the component exposes to the outside using
useImperativeHandle()
hook. - to access child node from a parent component for triggering focus or measuring the size or position of a child dom.
- it is useful in High Order Component, like assigning ref to input’s ref in a input component
1 | function FancyInput(props, ref) { |
hook
- each component has an initial list of “memory cells”, when we call a hook like
useState()
, it reads the current cell or initializes it during the first render.- hook is a function which lets you to “hook into”
React state
and lifecycle features from function components.- use pure function as much as possible
optimization
: when we need to set an initial value of a hook returned by a function, compare to pass the function directly as an argument to a hook, a more optimized writing pattern is to set an arrow function that returns the desired function.
1 | // fun will only execute once when the component initialize |
useState() keeps the local state in a function component, when we update a state variable, react replaces the state instead of merging it like
this.state()
in class component.useReducer() is used to store a complicated state, act like a small redux in a component.
a best solution for passing callbacks to children is to use
useContext()
together withuseReducer()
. with this, we don’t have to pass callbacks layer by layer.- create a context object for passing
dispatch
to children, so any child within the component can get thedispatch
byuseContext
.
- create a context object for passing
useRef() is used to store data, and the value returned by it will be valid in the whole life cycle
useEffect() and useLayoutEffect() the former invoked after the data id updated, while the later is called after the DOM is updated
1 | useEffect(() => { |
useContext() accept a context object created by
createContext()
and returns the current context value.. it’s used when components of different nesting levels need to access the same data.1
const value = useContext(MyContext)
- createContext() accept a default value and returned a context object which has three properties. context will shallowly compare the properties of value to decide whether it should re-render.
1
const MyContext = React.createContext(defaultValue)
provider
: a react component, that allows to consume components to subscribe to context changes.consumer
: a react component, that allows components to subscribe to context valuedisplayName
: can be modified directly, and is showed in DevToolscontextType
: a property on a class component can be assigned a Context object
1
2
3
4
5
6
7< MyContext.Provider value = {/* some value */ } />
<MyContext.Consumer>
{value => /*you can return a component and assign the value to it*/}
</MyContext.Consumer>
MyContext.displayName = 'MyDisplayName'useCallback() and useMemo() accept a function and an array of dependencies, the received function will be executed when any of dependencies changed. the former is used to memorize the received function, while the latter is used to memorize the value returned by the received function
useCallback()
allows you keep same callback after re-render. this method is recommend to use ascallback ref
to get node after mound
1
2
3
4const measuredRef = useCallback(node => {
console.log(node);
}, []);
<h1 ref={measuredRef}>Hello, world</h1>custom hook
- Custom Hooks let you share stateful logic, not state itself. it aims at to wrap the logic that can be reused.
difference between class and hook
class component
is hard to reconstruct and decomposecompilation of
class component
will generate a lot of auxiliary functionsclass component
requirethis
when passing a function to a component1
2
3
4
5
6
7
8
9
10
11// by a arrow-function. when the parent refresh, a new arrow function will be generated and the offspring will refresh, even the received props haven't change
<button onClick={() => this.handleClick1()}> btn3 </button>
// by bind. the side effect of this is same with the last one
<button onClick={this.handleClick1.bind(this)}> btn2 </button>
// to declare in the constructor, but it cannot pass parameters
constructor(props) { this.handleClick1 = this.handleClick1.bind(this) }
// by the static property of class, same with the last one
handleClick3 = () => { }no
this
issues in function components, you don’t have to do scope bondingcode lesser with function component, but worse maintaining
doesn’t need to manage state and life cycle
redux
concept
A(change) –> B(send an action
to store
) –> C(store
dispatch the action to a reducer
) –> D(the reducer
return a new state to store
) –> E(state
changed) –> G(execute listeners
)
- store a container created by
createStore()
, where data is changed and saved. - state data, an object
- action An object include a required
type
property and other business related properties. The different values of thetype
determine the number of actions that a store can perform. - reducer a function, receive an
action
,and return a newstate
. it automatically triggered bystore.dispatch()
Reducers
should be as the parameter pass to thecreateStore()
when initialize thestore
.
Redux Methods
createStore()
,reducers
as parameter is required, an initial state, the third argument is enhancer likemiddleware
provider
allow the redux hooks and connect to componentsstore.getState()
get the present statestore.dispatch()
sending an action to reducerstore.replaceReducer()
Replaces the reducer currently used by the store.combineReducers()
organize your reducers to manage their own slices of state. accept an object whose values are different reducing functions and turn it into a single reducing function you can pass tocreateStore
.1
combineReducers({ todo: myTodoReducer, counter: myCounterReducer })
bindActionCreators
is wrap action into dispatch1
2
3type actionCreator = (payLoad: any) => {...{type: string }, ...payload}
type dispatchAction = (payLoad: any) => dispatch(actionCreator(payLoad))
(actionCreators: actionCreator | actionCreator[], dispatch: Function) => dispatchAction | dispatchAction[]store.subscribe()
receives an listeners function and return a function in which you can disengage the listener.connect
return a function which like aHOC
accepts a component and wrap it to subscribe store’s updates and able to dispatch actions.how it works?
withProvider
component provided by redux we can wrap a component and get the component’s context and children, then any nested components can accessstore
withHooks
andconnect
1
2
3
4
5
6
7
8
9
10
11
12
13
14(mapStateToProps: mapStateToProps, mapDispatchToProps: mapDispatchToProps, mergeProps: mergeProps, options) => ((component) => connectedComponent)
// combine state and component's props and pass to the component, if this argument is passed to the components, then mapStateToProps will be executed as every time the store and own-props are updated.
type mapStateToProps = (state: object, ownProps?: object) => stateProps
// wrap actions as a part of props pass to the component
type mapDispatchToProps = (dispatch: Function, props?: object) => dispatchProps
// return an object as a result of mapStateToProps and mapDispatchToProps
type mergeProps = (stateProps, dispatchProps, ownProps) => mapStateToProps & mapDispatchToProps
type stateProps = any
interface dispatchProps {
dispatchPlainObject: () => dispatch(action)
}middleware
is used to inject a third-party in the redux processing, allow you to do sth (like logging, crash reporting, talking to an asynchronous API, routing, and more) after an action is dispatched and before a reducer update the state.1
(getState: store.getState, action, next: (action) => void) => void
action => middleware => reducer => state
next
is used to passaction
to the next middleware. you can pass the current action to continue the middleware chain or pass another action.middleware chin
: an action can have an array of middleware that is linked bynext
.- tips: if
next
is used in a middleware for passing another action, then that action will be directly to the reducer and will not go through its own middleware chain
- tips: if
- use
dispatch
inside a middleware will stop current middleware chain and start another middleware chin. - it is not different, either use
dispatch
, ornext
, or do nothing to stop middleware chain.
lazy loading
- with
React.lazy
Suspense
import()
, we can lazy loading components and can do something in the fallback which will be triggered if the component failed to render - with webpack code splitting, each module loaded by
import()
will be split to separate files.
1 | const OtherComponent = React.lazy(() => import('./OtherComponent')); |
concepts
shouldComponentUpdate VS pureComponent
- the former is class component’s life cycle, by return a boolean in the function to decide whether the dom should update
- the later doesn’t implement
shouldComponentUpdate
, but it has its own way by shallowly compare props and states - PureComponent or manually implement shouldComponentUpdate are good methods for avoiding needless re-render of children.
virtual DOM
fiber
uncontrolled and controlled component
- when dispose Form elements, like input or select, there are two modes uncontrolled and controlled. this is depending on how deep that you want to control the input.
- It’s useful to consider components as “controlled” (driven by props) or “uncontrolled” (driven by state).
1 | // uncontrolled, get the value with ref |
automatic batching
batching update
happened when you had multiple state updates, and react will re-render once at the end of a function, not every time thesetState
is called. however, this is only occurred in a browser event handler. for now in theversion 18
, updates are batched automatically, regardless of what they’re wrapped by.ReactDOM.flushSync()
, this method is used when you don’t want to applyautomatic batching
. updates in this method will be update immediately, and it’s a sync method, since we know that setState is a async method.1
2
3
4
5
6
7import { flushSync } from 'react-dom'; // Note: react-dom, not react
function handleClick() {
flushSync(() => {
setCounter(c => c + 1);
});
}
concurrent mode, found in
version 18
- allow us to bounce back and forth between multiple tasks, but doesn’t mean that those tasks are processing at the same time, rather it’s that one task can be paused while other more urgent task are seen to. once the more urgent one are done, we jump back the less urgent one, bringing with the updated information from the more urgent one.
useTransition
, this hook is used to wraps a less urgent update.
strict modeOfficial Doc, this is used only in the DEV mode. when running in this mode:
- activates additional checks and warnings for its descendants
- can be used for any part of your app
- React intentionally double-invokes effects (mount -> unmount -> mount) for newly mounted components in order to flush out unsafe side effects.
coding tips
- refresh page by router according to hash value
1 | this.props.history.replace({ pathname: this.props.location.pathname, search: `id=${id}&api=${window.location.hash.split('&')[1].split('=')[1]}` }) |
- the root element of a component may not need a name
1 | <> |
redux-toolkit
- core api
- createAction,createReducer
- createSlice:including
createAction
andcreateReducer
- PayloadAction:
ts
泛型,用以声明action.payload
createAsyncThunk
accepts a Redux action type string and a callback function that should return a promise. return a standard Redux thunk action creator
web3
window.ethereum (an EIP-1193 compliant provider)
Web3.givenProvider
webpack
module building, browser compatibility, code compressing, code splitting, lazy loading
building process
- generate a config from the
webpack.config.js
and the command line. - use
compiler
module to create acompilation
instance which has access to all modules and their dependencies. execute thecompiler.run()
to start working.compiler
andcompilation
are the heart of webpack, both of them extend fromtapable
. - analysis process is started from the
entry
file. useacron parser
to generates AST(Abstract Syntax Tree / 抽象语法树) for theentry
file. - traverse through entire AST to create a dependency graph. at this stage, if webpack find any matched
rules
forloader
s, the loaders will convert those codes(e.g. css files) into js, and thenParser
parses them into AST. - this process will be repeatedly executed for the each dependency, to recursive traverse.
- bundle all the files.
- in the above process
- webpack compiles the different types of file to js file by
loader
sloader
is responsible for file converting. every file type can have more than one loader, those loaders will be invoked with method chaining in order. so the output of a loader will be the arguments of the next loader.
compiler
will throw some hooks when webpack starts/stops, emit assets, watch mode etc. those events can be listened byplugin
and allowsplugin
to intervene the result of output.plugin
can extends features. listen events sended by compiler allows a plugin to effect the result.
- webpack compiles the different types of file to js file by
optimization
tree shaking
compress code
by some plugins, liketerser
,css minimize
code splitting
, useimport()
to split code into multiple chunk andlazy-loading
them.import()
can cooperate withsuspense
feature in react.
boost build time
- webpack cache strategies
- get precise time by
speed-measure-webpack-plugin
, like how long the engine spends in each plugin / loader - save time from each plugin or loader
- ts-loader, use
happyPackMode
ortranspileOnly
to turn off type checking. the former will implicitly setstranspileOnly: true
and will not reports syntactic errors. it is usually used withhappypack
. fork-ts-checker-webpack-plugin
works for ts type checking in a separate process which runs in parallel with webpack
- ts-loader, use
tree shaking
after checking
import and export
,tree shaking
will remove the modules which is imported but doesn’t be used. from this point, what method do we use to import file is critical, and we can knowtree shaking
only supportsES module
.to import the specific modules instead of the whole library
1
2
3
4
5
6// Import everything (NOT TREE-SHAKABLE)
import _ from 'lodash';
// CAN BE TREE SHAKEN
import { debounce } from 'lodash';
import debounce from 'lodash/lib/debounce';side effect
refer to a function will effect the variables or scope outside the functionhowever, the border between
used
andnot used
is not clean, some modules are started to work when it is imported. sinceobject
is reference type, which means that if a function’s arguments are object, then any changes on we made on it will be easily effect the data outside the function. so there has a propertysideEffects
in thepackage.json
to tellwebpack
whether should betree shaking
.1
2
3
4
5
6
7
8
9
10
11// all the modules have/haven't side effects, and then can't/can be tree shaking
{
"sideEffects": true/false
}
// give webpack an array with side effects
{
"sideEffects": [
"./src/file1.js",
"./src/file2.js"
]
}
module federation
to expose some of our components to the outside, and therefor which can be used in other projects.
this feature is considered as an idea of micro-frontend
HTTP
http vs https
http
请求信息明文传输,https
加密传输更安全HTTPS uses SSL/TLS certificates to authenticate the identity of the server and establish a secure connection between the client and the server.
由于HTTPS需要做服务器、客户端双方加密及解密处理,因此会消耗CPU和内存等硬件资源
three-way handshake is used to establish TCP connection, to ensure that the service and the client both can send and receive data
- The client sends a SYN packet (SYN = synchronize) to the server, and specifying its initial sequence number. client can send and server can receive.
- the server responds with a packet containing both SYN and ACK(Acknowledgement Number) flags. server can send
- the client sends back an ACK packet. client can receive.
URL
- 保留字符 :
: / ; ? #
- encodeURI 和 decodeURI 函数操作的是完整的 URI,不会编码保留字符。
- encodeURIComponent 和 decodeURIComponent 函数操作的是组成 URI 的个别组件,会编码任何保留字符
- 保留字符 :
methods
post | put | delete
contain request body for saving data.get
: retrieve datapost
: creating new resources, submitting form data, or sending large amounts of data that cannot be sent in a URL query string.put
: updating existing resources
headers
Content-Disposition
: a response header which is indicating if the content is expected to be displayed inline in the browser,or as an attachment to downloaded and saved locally.1
2
3// inline or attachment
res.set('Content-Disposition', 'attachment; filename=foo.fdf');
res.send(_res)request
responseType: XMLHttpRequestResponseType
specifying the type of data contained in the response.1
XMLHttpRequestResponseType: "" | "arraybuffer" | "blob" | "document" | "json" | "text";
code
- 1XX- Informational
- 2XX- Success
- 3XX - Redirection
- 4XX - Client Error, 400 Bad Request, 401 Unauthorized, 404 Not Found
- 5XX - Server Error, 500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable
NPM
1 | npm version patch // v1.0.1 |
- control the files of a package
- define the
file
field in thepackage.json
- use
.npmignore
which is used as same asgitignore
- define the
Vscode
vscode setting
1 | { |
short key | function |
---|---|
Ctrl+Shift+[ | 折叠 |
Ctrl+Shift+] | 展开 |
ctrl+d | 选中单词 |
alt+shift+鼠标点选 | 多个位置 |
alt +鼠标点选 | 选中 |
alt + z | word break |
ctrl + shift + L | pitch on the same words simultaneously |
ctrl + shift + p | show command menu |
Setting json | C:\Users\tong\AppData\Roaming\Code\User |
Line break | “files.eol”: “\n” |
ctrl + g | go to a specif line |
search patterns
symbol | example | explain |
---|---|---|
OR或者管道符号(竖线) | x OR y | 返回x或者y的信息,或者和两者都相关的信息 |
AND | x AND y | 返回和两者都相关的信息 |
- 短横线 | x -y | 排除一个相似的容易造成误导的词语,返回x相关的信息而不是y,注意: 符号-和y之间没有空格 |
* 通配符 | x * y | 匹配任何信息 |
() 括号 | (x OR y) -z | 将多个款项和符号组合搜索 |
$ 美元符号 | iphone $2000 | 价格搜索 |
define: | define:china | 显示谷歌内置的词典,以卡片形式展现 |
cache: | cache:https://github.com | 返回该页面最新缓存版本 |
filetype: 或者 ext: | 个人简历 filetype:pdf | 返回符合指定的文件类型的信息 |
site: | js site:github.com | 将搜索限制在某个指定的网站 |
related: | related:github.com | 查找和给定域名相关的站点 |
intitle: | intitle:github | 返回所有标题中包含“github”的信息 |
allintitle: | allintitle:github js | 和intitle类似,返回标题中包含所有单词的信息 |
inurl: | inurl:github | 和intitle类似,不同的是匹配的是url而不是标题 |
allinurl | allinurl:github js | 同上 |
intext: | intext:github | 和intitle类似,不同的是匹配的是内容而不是标题 |
allintext: | allintext:github js | 同上 |
AROUND(X) | apple AROUND(4)iphone | 间隔限制,单词“apple”和“iphone”必须出现在内容中,并且相隔不超过四个单词。 |
weather: | weather:san francisco | 查找指定位置的天气 |
stocks: | stocks:aapl | 查找指定的股票信息 |
map: | map:silicon valley | 地图搜索 |
movie: | movie:steve jobs | 电影搜索 |
in | $329 in GBP | 单位转换,前者向后者转换 |
source: | apple source:the_verge | 在google News中查找来自某个来源的新 |
terms
en | ch |
---|---|
closed testing | 精密测试 |
records
2023/7/19
- CSS filters can form
stacking context
- the property
hidden
of input does not work in Safari