10/24 把哺我們愛妳>_<

- digest auth
- nginx
- react-fiber

digest auth

- Basic: RFC 2617 (1999) -> RFC 7617 (2015)
- Digest: RFC 2069 (1997) -> RFC 2617 (1999) -> RFC 7617 (2015)
- OAuth 1.0 (Twitter, 2007)
- OAuth 2.0 (2012)
- Bearer (OAuth 2.0): RFC 6750 (2012)
- JSON Web Tokens (JWT): RFC 7519 (2015)

basic

client

server

發送請求

401, realm

client

server

base64encode(username+":"+password)

跳出提示窗請求輸入 username 和 password

digest Auth

client

server

發送請求

401, realm, nounce

client

server

~~base64encode(username+":"+password)~~

跳出提示窗請求輸入 username 和 password

HA1 = MD5(username:realm:password)
HA2 = MD5(method:digestURI)
response = MD5(HA1:nonce:HA2)

async fetch (url, options={}) {
  if (resp.status == this.statusCode) { // this.statusCode 401
    this.hasAuth = false;
    await this.parseAuth(resp.headers.get('www-authenticate'))
    if (this.hasAuth) {
      const respFinal = await fetch(url, this.addAuth(url, options));

      if (respFinal.status == this.statusCode) {
        this.hasAuth = false;
      } else {
        this.digest.nc++;
      }
      return respFinal;
    }
  } else {
    this.digest.nc++;
  }

  return resp;
}

library: digest-fetch

React Fiber

溫故知新 -> 小白的 slide

為了更流暢的使用者體驗，重寫了 react core

瀏覽器渲染

single thread

multiple thread

Web API

Event Queue

Event Loop

Event Table

The JavaScript runtime environment

Event loop

Browser FPS

60 fps -> 16ms

requestIdleCallback

我來用 requestIdleCallback

去做複雜的運算

但每個瀏覽器支援不一，且有些限制

React 自己幹了一個類似的去模擬一樣的效果

致命的困難：

要怎麼把 react-diff 塞在 idle period 裡？

要讓遍歷的過程變得更可控

// React 15 -> recursive 

walk(a1);

function walk(instance) {
    doWork(instance);
    const children = instance.render();
    children.forEach(walk);
}


const a1 = {name: 'a1'};
const b1 = {name: 'b1'};
const b2 = {name: 'b2'};
const b3 = {name: 'b3'};
const c1 = {name: 'c1'};
const c2 = {name: 'c2'};
const d1 = {name: 'd1'};
const d2 = {name: 'd2'};

a1.render = () => [b1, b2, b3];
b1.render = () => [];
b2.render = () => [c1];
b3.render = () => [c2];
c1.render = () => [d1, d2];
c2.render = () => [];
d1.render = () => [];
d2.render = () => [];

問題來惹
這個遍歷無法暫時停止

Recursive -> Singly Linked List Tree

function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
    ...
    this.return = null; // 父層
    this.child = null; // 子層
    this.sibling = null; // 兄弟節點
    this.effectTag = NoEffect; // bitwise
    ...
}

沒 children

function Stanny() {
  return (
    <MyClass>
      <h1>有首歌很好聽</h1>
      <div>
        <h2>
          香草
        </h2>
      </div>
      <span>
        <h3>
          把哺
        </h3>
      </span>
    </MyClass>
  )
}


div = {
  return = MyClass; // 父層
  child = h2; // 子層
  sibling = span; // 兄弟節點
  effectTag = NoEffect;
}

舉個例子🌰

深度優先搜尋演算法（英語：Depth-First-Search，DFS）是一種用於遍歷或搜尋樹或圖的演算法。沿著樹的深度遍歷樹的節點，儘可能深的搜尋樹的分支。當節點v的所在邊都己被探尋過，搜尋將回溯到發現節點v的那條邊的起始節點。這一過程一直進行到已發現從源節點可達的所有節點為止。如果還存在未被發現的節點，則選擇其中一個作為源節點並重複以上過程，整個行程反覆進行直到所有節點都被存取為止。屬於盲目搜尋。

深度優先搜尋是圖論中的經典演算法，利用深度優先搜尋演算法可以產生目標圖的相應拓撲排序表，利用拓撲排序表可以方便的解決很多相關的圖論問題，如最大路徑問題等等。

- 維基百科

function Stanny() {
  return (
    <MyClass>
      <h1>有首歌很好聽</h1>
      <div>
        <h2>
          香草
        </h2>
      </div>
      <span>
        <h3>
          把哺
        </h3>
      </span>
    </MyClass>
  )
}

點我看更多