Live Note

Remain optimistic

Posted on Edited on

TV series

  • Game of Thrones
  • WestWorld
  • Chernobyl
  • Fantasmagorias
  • Love, Death & Robots
Read more »

Posted on Edited on In

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。
Symbol 值通过 Symbol 函数生成，也就是说，对象的属性名现在可以有两种类型：一种是字符串，另一种就是 Symbol 类型。只要属性名属于 Symbol 类型，就是独一无二的，可以保证不会与其他属性名冲突。

1
2
let s = Symbol()
typeof s //symbol

Symbol 函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在 console 显示。

1
2
let s = Symbol("str")
s.toString() //'Symbol(str)'

如果 Symbol 的参数是一个对象，就会调用该对象的 toString 方法，再生成 Symbol 值

1
2
3
4
5
6
7
const obj = {
  toString() {
    return "test"
  },
}
const s = Symbol(obj)
s.toString() //'Symbol(test)'
Read more »

Posted on Edited on In

友好的 React Hooks

网络上对 react hooks 的评价负面大于正面，确实很容易写出性能有问题的代码，关键就在于：我们太喜欢用 useState 了。
在 vue-composition-api 中，reactivity 数据都有 wrapper，custom-vca 里不管产生多少个 reactivity 对象，不会直接产生 re-render。只有那些被 return 到外部跟 template 绑定的部分才会触发视图渲染。
而 react 的 reactivity 就是通过 re-render 实现的，useState 没有 wrapper，每次使用都会得到一个触发渲染的函数。在这种 reactivity 机制下，就需要特殊的方式编写 hooks —— State/Effect 分层

假设有个 useHeight：

1
const [ref, height] = useHeight()

高度变化时，被动 re-render，难以转换合并。大部分情况下，不提供 state，而提供 effect 可能会更好：

1
2
3
4
5
const [height, setHeight] = useState(0)
const ref = useHeight((height: number) => {
  // do something
  setHeight(height)
})

使用者在外部声明 state，然后在 callback 中按需 setState。使用者可以结合其他 state，做 dispatch 到 reducer 的一次整体更新，而不是被动 re-render。
根据 State/Effect 分层理念，尝试着给出友好地 react hooks 公式：

1
const handler = useProducer(consumer, options)

producer 接收 consumer callback 作为参数，返回 handler 控制函数，用于绑定到事件或其他位置。

Read more »

Posted on Edited on

TG（目前）最大的需求–宣传

前几天在 TG，有个人问我如何实现一个 TG 批量拉人入某个 group。找了找资料发现真的可以实现。

测试了似乎单次最多只能邀请 30 人进组，并且一个人邀请太多人会被禁止单项邀请。
TG 还能不进群，直接拉进去，直接获取某个群组的所有 member，太 BUG 了

有类似想法的可以联系我，与我交流。

Posted on Edited on In

Function Composition

In computer science, function composition is an act or mechanism to combine simple functions to build more complicated ones. Like the usual composition of functions in mathematics, the result of each function is passed as the argument of the next, and the result of the last one is the result of the whole. -- Wikipedia

Example:

1
2
3
4
5
6
var compose = (f, g) => (x) => f(g(x))
var head = (x) => x[0]
var reverse = reduce((a, x) => [x].concat(a), [])

var last = compose(head, reverse)
last(["first", "second", "last"]) // 'last'

In the definition of compose, g will be executed before f, thus creating a right-to-left data stream. This is much more readable than nesting a bunch of function calls.

Associativity

Like many other functional programming concepts, associativity is derived from math.It is an expression in which the order of evaluation does not affect the end result provided the sequence of the operands does not get changed. -- JOSEPH REX

Example:

1
2
2 + (3 + 4) === 2 + 3 + 4 // true
2 * (3 * 4) === 2 * 3 * 4 // true

Because of the grouping of calls to compose is not important, so the result is the same. This also gives us the ability to write a variadic compose.
Like this:

1
2
3
4
5
6
7
8
9
10
var last = compose(head, reverse)
last(["first", "second", "last"]) // 'last'

var upperLast = compose(head, reverse, toUppercase)
upperLast(["first", "second", "last"]) // 'LAST'

var mediaUrl = _.compose(_.prop("m"), _.prop("media"))
// var images = _.compose(_.map(img), _.map(mediaUrl), _.prop('items'));
// use the associativity
var images = _.compose(_.map(_.compose(img, mediaUrl)), _.prop("items"))

There is no standard answer on how to composition, just make it more reusable.

Read more »