Js

Regx

正则 /g 与 test

https://stackoverflow.com/questions/1520800/why-does-a-regexp-with-global-flag-give-wrong-results?noredirect=1&lq=1

A RegExp object with the g flag keeps track of the lastIndex where a match occurred, so on subsequent matches it will start from the last used index, instead of 0. If you don’t want to manually reset lastIndex to 0 after every test, just remove the g flag.

/xxxx/g 的正则如果使用 test 会出现奇怪的效果,因为正则变量做了状态存储:

  1. var regx = new RegExp(/[a-z\d]/g);
  2. console.log(regx.test('5')) // true
  3. console.log(regx.test('5')) // false
  4. console.log(regx.test('5')) // true
  5. console.log(regx.test('5')) // false

regx 变量本身内部有一个 lastIndex,用于记录测试内容走过的位置,第一次test完,例如上面的 ‘5’ 已经走完了(正则匹配也有可能没走完,这种场景下可以让 test 类似一个迭代器的效果),lastIndex 为 1,再test会从 ‘5’ 的 1 位置往后做 test,就相当于在 test ‘’,所以返回了完全不同的值,然后再 test 时就又继续了👆第一次往后的操作。就很难用。

结论:
如果是用正则做 是否符合 操作
用String.prototype.match代替,该方法结果的 falsy 不会受是否有g后缀影响,但是 g 会改变有值返回的内容:

  1. 'dfsd'.match(/^[a-z_][\da-z_]*$/g)
  2. // ["dfsd"]
  3. 'dfsd-'.match(/^[a-z_][\da-z_]*$/g)
  4. // null
  5. 'dfsd-'.match(/^[a-z_][\da-z_]*$/)
  6. // null
  7. 'dfsd'.match(/^[a-z_][\da-z_]*$/)
  8. // ["dfsd", index: 0, input: "dfsd", groups: undefined]

React

await 与 state

https://stackoverflow.com/questions/47019199/why-does-async-await-work-with-react-setstate/47022453#47022453
await 返回 promise 等待 resolve,await 中 setState执行,准备 render。
由于 await 行后的逻辑需要等待,一定会排在 render 函数执行后执行。

state 的不同表现形式

https://codesandbox.io/s/qiguaide-hooks-xgbsz?file=/src/index.js
之所以会这样是因为 class 的state 始终只有一份。
而 hooks 中函数对 state 的引用是一种闭包的效果,而由于每次render都会重置闭包(重新创建一个闭包),所以上一次render的所有函数都会保留上一个闭包的内容。
陈旧闭包问题:
https://dmitripavlutin.com/react-hooks-stale-closures/