ssh

# 社区看到的优解 其实这题本身是我想复杂了，我是一个个格子去遍历，然后再上下左右去扩展延伸。 但是其实只需要遍历四个边界上的节点，遇到 O 的边界点才开始蔓延遍历，并且把遍历到的节点都标记为 M（防止重复遍历） 最后再一次性遍历整个二维数组，遇到 W 标记的格子都转为 O（因为是从边界蔓延的，一定是不符合 X 的条件的）。 这样遍历所走的路就会少很多。 ```js var solve = function (board) { if (board.length == 0) return null; for (var y...

# Current and work in progress trees current 指向当前的 fiber 树 React 在开始更新的时候，会构建一颗 workInProgress 树。对于已经存在的 Fiber Node，React 会创建一个 alternate node（替身）放到 workInProgress 树上。 当更新完成后，workInProgress 就变成了 current。 React 有一个原则就是一致性，更新 DOM 的操作永远是一次性的。 workInProgress...

# Effects list React 为了使协调过程变得更快，采取了一些比较有趣的策略。比如他们构建了一个链表用来快速迭代带有 `effect` 的Fiber Node。 这把原本的迭代一棵树的问题转化成了迭代一个链表，快多了！ 这个 副作用链表是 fiber树的子集，它记录了一些需要做DOM更新或者其他副作用的节点，用 `nextEffect` 属性指向下一个副作用节点。 Dan Abramov 给了一个好玩的比喻，副作用链表之于整个Fiber Tree，就像是圣诞树上挂了一些圣诞灯饰。 比如这个图上，我们的更新导致将c2插入DOM，d2和c1更改属性，b2触发生命周期方法。 副作用链表会将它们链接在一起，以便React可以跳过其他节点： 

# Root of the fiber tree DOM 容器的元素上可以访问到 Root Fiber ```js const domContainer = document.querySelector('#container'); ReactDOM.render(React.createElement(ClickCounter), domContainer); const fiberRoot = query('#container')._reactRootContainer._internalRoot const hostRootFiberNode = fiberRoot.current // current 可以回头查找 fiberRoot fiberRoot.current.stateNode...

# Fiber 的结构 `ClickCounter` 组件 ```js { stateNode: new ClickCounter, type: ClickCounter, alternate: null, key: null, updateQueue: null, memoizedState: {count: 0}, pendingProps: {}, memoizedProps: {}, tag: 1, effectTag: 0, nextEffect:...

https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react/#general-algorithm # General algorithm React 在两个主要阶段执行工作：render 和 commit。 render 阶段构建出一颗带有副作用的 Fiber 树，在 commit 阶段遍历副作用链表，更新 DOM 元素和其他副作用变更。 render 阶段是可以异步执行的，它可以在完成了一个或多个 Fiber 的工作后，把执行权交给优先级更高的事件，再恢复到暂停时的 Fiber，所以 Commit 阶段一定要和这个阶段分开来，因为你不可以把一部分状态绘制到屏幕上，不符合一致性原则。 commit 阶段一定是同步的，一口气执行完毕的。 ## render 阶段的生命周期： 1. [UNSAFE_]componentWillMount...

https://github.com/tc39/proposal-pipeline-operator 未来的 pipeline 语法。 add(7, ?) 也是一个新的柯里化提案，等于提前为 add 方法固定一个参数，返回一个新的方法。 ```js function add (x, y) { return x + y } const addSeven = add(7, ?) // 等价于 const addSeven =...

# 什么是光栅化 光栅化是将一个图元转变为一个二维图像的过程。二维图像上每个点都包含了颜色、深度和纹理数据。将该点和相关信息叫做一个片元（fragment）。 光栅化的目的，是找出一个几何单元（比如三角形）所覆盖的像素。 光栅化是将几何数据经过一系列变换后最终转换为像素，从而呈现在显示设备上的过程，如下图：  光栅化会根据三角形顶点的位置，来确定需要多少个像素点才能构成这个三角形，以及每个像素点都应该得到哪些信息，比如uv坐标该是什么…等。这是通过对顶点数据进行插值来完成的。

# vue scope css 是怎么实现的 https://juejin.im/post/5d8627355188253f3a70c22c 一个 `.vue` 单文件组件会被编译成这种格式。 ``` js // code returned from the main loader for 'source.vue' // import the block import render from 'source.vue?vue&type=template' // import...

复习一下box-sizing https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing