ARTS-WEEK4-23.9.3~23.9.8

Algorithm 一道算法题

交替合并字符串，详见https://leetcode.cn/problems/merge-strings-alternately/?envType=study-plan-v2&envId=leetcode-75

function mergeAlternately(word1:string, word2:string): string {  let result = '', minLen = 0, end = '';  if(word1.length > word2.length) {    minLen = word2.length;    end = word2.slice(minLen)  } else {    minLen = word2.length;    end = word2.slice(minLen)  }  for(let i =0; i< minLen; i++) {    result += `${word1[i]}${word2[i]}`  }  return `${result }${end}` }
// 社区优解function mergeAlternately(s1: string, s2:string): string {  let n = s1.length, m = s2.length, i =0, j = 0, ans = '';  while(i<n || j < m) {    if(i < n) ans += s1[i++]    if(j<m) ans += s2[j++]  }  return ans}

Review 读一篇英文文章

Teach Yourself Programming in Ten Years: detail http://norvig.com/21-days.html(30minutes)

The passage you provided offers a thoughtful analysis of the unrealistic expectations that some programming books may create with their titles like "Teach Yourself Java in 24 Hours." It highlights the misconception that one can become proficient in a complex field like programming in such a short time frame, and it emphasizes the importance of dedicated, long-term learning and deliberate practice.

Some key takeaways from the passage:

1. Learning Takes Time: Becoming proficient in any field, including programming, typically requires a significant amount of time and effort. The passage mentions research findings that suggest it takes about ten years of deliberate practice to develop expertise in various domains.

2. Deep Understanding: Superficial familiarity with a programming language or concept can be achieved quickly, but true mastery and a deep understanding of how to use it effectively take much longer. Learning syntax alone does not equate to being a skilled programmer.

3. Learning by Doing: The passage emphasizes the importance of learning by doing. Practical experience, working on real projects, and collaborating with others are crucial aspects of becoming a proficient programmer.

4. Variety of Languages: Learning multiple programming languages, each with its paradigms and strengths, can broaden one's perspective and problem-solving abilities.

5. Computer Science Knowledge: A well-rounded programmer should also understand the underlying principles of computer science, including aspects like hardware performance, memory management, and algorithms.

Technique/Tips 分享一个小技术

Fiber 的作用和原理

What

官方解释：Fiber 是 React 16 中新的协调引擎。它的主要目的是使 Virtual DOM 可以进行增量式渲染。

Why: React 的响应式是基于 setState 的方式，react 的 setState 会渲染整个 vdom，而一个应用的所有 vdom 可能是很庞大的，计算量就可能很大。

浏览器里 js 计算时间太长是会阻塞渲染的，会占用每一帧的动画、重绘重排的时间，这样动画就会卡顿。

How:Fiber 架构怎么做的？

Fiber 即是一种数据结构，又是一个工作单位。

优化的目标是打断计算，分多次进行，但现在递归的渲染是不能打断的，有两个方面的原因导致的：

• 渲染的时候直接就操作了 dom 了，这时候打断了，那已经更新到 dom 的那部分怎么办？

• 现在是直接渲染的 vdom，而 vdom 里只有 children 的信息，如果打断了，怎么找到它的父节点呢？

React16 之后， react 把渲染流程分为了两部分：render 和 commit。

Step one: render

render 阶段会找到 vdom 中变化的部分，创建 dom，打上增删改的标记，这个叫做 reconcile，调和。这个阶段是可以被打断的？那么如何打断以后还能找到父节点、其他兄弟节点呢？

现有的 vdom 是不行的，需要再记录下 parent、silbing 的信息。所以 react 创造了 fiber 的数据结构。

除了 vdom 中 children 信息外，额外多了 sibling、return，分别记录着兄弟节点、父节点的信息。

这样遇到优先级更高的任务，就可以暂停 fiberle 。

Step two: commit

react 为了变为可打断的，reconcile 阶段并不会真正操作 dom，只会创建 dom 然后打个 effectTag 的增删改标记。commit 阶段就根据标记来更新 dom 。

但是 commit 阶段要再遍历一次 fiber 来查找有 effectTag 的节点，更新 dom 么？

react 在 reconcile 的时候把有 effectTag 的节点收集到一个叫 effectList 队列里，然后 commit 阶段直接遍历这个队列 effectList，根据 effectTag 来增删改 dom。

dom 创建前后就是 useEffect、useLayoutEffect 还有一些函数组件的生命周期函数执行的时候。

众所周知，useEffect 被设计成了在 dom 操作前异步调用，useLayoutEffect 是在 dom 操作后同步调用。Why？如果 effect 同步执行，计算量很大，那 fiber 加购的优势就没有了。所以 effect 设计成是异步的，不会阻塞渲染。而 useLayoutEffect 是想在这个阶段拿到一些布局信息的，渲染已经结束了，这时候同步哪些布局的信息，自然没有问题。

官网介绍：commit 分为 before mutation、mutation、layout 三个阶段

mutation 就是遍历 effectList 来更新 dom 的。它的之前就是 before mutation，会异步调度 useEffect 的回调函数。它之后就是 layout 阶段了，因为这个阶段已经可以拿到布局信息了，会同步调用 useLayoutEffect 的回调函数。而且这个阶段可以拿到新的 dom 节点，还会更新下 ref。

Share 分享一个观点

别让自己“墙”了自己

详见https://coolshell.cn/articles/20276.html

得知耗子叔的意外才开始看他的文章，听取他的建议。之前也知道他，看过他的一篇文章就放弃了，后端的东西我不懂，也不愿意去学，其实就是在‘墙自己’。

开始接触后端的知识，有关算法题之后，也没想象的那么难。希望不给自己设限，坚持学习。早日成为一名合格的程序员。