第四周

2022-06-13 ~ 2022-06-19

Review

Reading Source Code: React-Query

本文讲述了阅读 React-Query 源码时候对其思路的理解。

• React-Query 这个库在目录结构上采用了前端开发所熟悉的结构，便于开发人员查阅。

• 这个库的思路是将功能拆分为 core 和 react hooks，其中 core 采用面向对象的思路去编码，而 react hooks 则作为 bridge 工具，对外暴露简单易用的 api。

• 它的 hooks api 用重载的实现，去迎合开发者们不同编码习惯的需求，这样开发者们在使用的时候去可以忽略默认唯一的参数签名了。

• 在源码中，该库将选项参数 options 当作类似于 context 的思路向下传递，可以避免参数签名过长带来的阅读难度，易于维护。

Algorithm1

括号生成

Algorithm2

删除链表的倒数第 N 个结点

Tip

The peculiar magic of flexbox and auto margins

在日常开发中，使用 flex 布局的时候经常会遇到类似这种的结果，前面的子节点都是 flex-start，而最后一个节点希望它出现在最后面，但是在 mdn 的 flex 教程中并没有找到相关的内容

<div class="parent">
  <div class="child">
    <div class="child">
      <div class="child the-last-should-appear-in-the-end"></div>
    </div>
  </div>
</div>

但是写代码就是不断实践的过程，在看到这篇文章之前也发现了同样的解法，就是给最后一个子节点加上margin-left: auto;即可