第一組讀書會 2-6 ~ 2-7

[LoisChen68]

簡報：

• 2-6 單向資料流與一律重繪渲染策略： https://hackmd.io/@NoName21/S1XpSzspa#/
• 2-7 畫面組裝的藍圖：component 初探： https://hackmd.io/@NoName21/B1PMLS4Cp#/

導讀人： Aya
筆記工： Lois

問題討論

Q： 每個檔案最多可以有幾個 default export ?
A： 1 個

Q： UI 跟 Component 的區別
A： UI = 畫面 = 使用者介面，不是在指某個機制

Q： 策略二的一律清空畫面是模擬 React 的行為嗎？
A： 不是，2-6 在講實現單向資料流的 DOM 渲染策略都不是在指任何一個框架，而是在純 JavaScript 情境中能夠實現單向資料流的常見策略

Q： React 官方文件提到的 one-way data flow 是指它的東西會從最上層傳到最下層，還是指資料與畫面分離，這兩件事是同一件事嗎
A： 這是在講同一件事，但這裡不是在講單向資料流本身的意義，而是單向資料流在 React 中要做出的效果，這句話其實就是單一資料流的結果

Zet 額外補充：

• React 官方文件都只講結果，不講概念的本質，因為閱讀門檻高，就像翻遍官方文件找不到 React element 的詞，唯一能看到 React element 的詞只有在 createElement 可以找到，因為他放棄治療解釋什麼是 React element，所以現在都用 JSX element 這個說法在指 React element，反正沒有人會手動寫 React.createElement ，大家都寫 JSX，但真的懂 React 的人不可能不知道 React element

• <Component/> 跟 {Component()} 兩者呼叫的差異

  • 假設今天有一個 Foo component

    const Foo = () => {
      return (
        <div>
          <h1>Foo</h1>
        </div>
      );
    };

    • 問題一：這個 console.log 出來的結果會是什麼？

      const a = <Foo />;
      console.log(a);

      A.

      <div>
          <h1>Foo</h1>
      </div>

      B.

      <Foo/>

      答案是

      B
    • 問題二：當這行程式執行完畢後，Foo 這個 component function 是否已經被呼叫過？

      const a = <Foo />

      答案是

      沒有
  • 這兩種不同的呼叫方法的差異：

        const a = <Foo />
        const b = Foo()
        console.log(a) // {type: f Foo(), ...}
        console.log(b) // {type:"div", ...}

    • 這兩種呼叫方法最大的差異是，你必須透過建立 React element 的方法才能讓他被當作 component 來呼叫，這是唯一的方式
    • 如果是用 Foo() 來呼叫，React 只會當作它是一個普通的 funcion，它只是一個首字母為大寫的 function
    • React 並不是以首字母為大寫來判斷是不是 component
    • 首字母大寫對 React 來說沒有意義，對 transpiler 才有意義，因為最後 React 都會執行 React.createElement
  • 假設今天有一個小寫 a 作為 component

    const a = () => {
      return <div/>
    };

    如果是使用 React.createElement 來呼叫 a ，仍會被當作是一個 component，只是不能寫 JSX，因為如果寫 JSX ，它會以為是一個 DOM element 類型
  • 所以能讓 React 正確的判斷是不是 component 是以呼叫的方式來決定，而不是由定義的方式來決定
  • 若使用下方這段程式碼，並且在 React 開發者工具來觀察

    const Foo = () => {
      return (
        <div>
          <h1>Foo</h1>
        </div>
      );
    };
    root.render(
      <div>
        <Foo />
        {Foo()}
      </div>
    );

    就會發現，使用 Foo() 來呼叫在結構上並不會有 Foo 這個節點
    
    所以其實使用 Foo() 來呼叫就等同於直接將 React element 填入

    root.render(
      <div>
        <Foo />
        {Foo()}
      </div>
    );

    等同於：

    root.render(
      <div>
        <Foo />
        {
          <div>
            <h1>Foo</h1>
          </div>
        }
      </div>
    );

  • 為何要使用 React element 的方法去呼叫 component？
    • 這是一種 React 延遲呼叫的設計，背後還有一個概念是控制反轉
    • 白話文是：我這裡想要一個 component 的實例，你幫我產
    • <Foo /> 只是在描述我希望這裡產生一個 Foo component 實例的這件事，但還沒被呼叫
  • 當 component function return 了 React element 之後，reconciler 會開始進行分析如何將 React element 轉成 DOM element，當遇到不是 DOM element 的東西的時候才會去呼叫
  • 由上而下由外往內的流程產出 React element 的 tree 之後才會交給 renderer 一次轉換成實際的 DOM element
  • 子 component 的呼叫不是在父 component 建立 React element 的過程，會等到描述完了內部開始處理才開始呼叫
  • 所以使用 {Foo()} 來呼叫，在 runtime 時 JavaScript 引擎分辨不出這裡要建立一個 component 的實例，只是單純在描述一段 React element 的表達式
  • 為什麼 component 能夠帶有狀態，是因為 React 對 hooks 加料，能夠去讀取 component 內部的資料，所以直接使用 call function 去呼叫 component，就不是在 React 機制底下運作，就會導致 hooks 壞掉
  • 如果不是 component，則完全可以使用一個變數來描述一段 React element，甚至可以根據 props 傳入產生不同的 React element

    const renderTextElement = (text) => <p>{text}</p>

  • 延遲呼叫還有一個好處是當我去建立這個 React element ，我可以知道你想呼叫什麼 component ，甚至知道你想傳入什麼 props ，React 其實會根據某些情況判斷不一定要去 render 這個 component
  • 如果將子 component 定義在父 component 之外，並使用{} 來呼叫，即使父 component 被 re-render，該子 component 因為被判定為同一個 component 為不會被 re-render
  • React 有一個內建的優化機制，發現其中有一個節點是 component 類型的，並且在兩次 render 之間為同一個 component 類型，則會略過這個 re-render

    import React, { useState } from "react";
    
    function Foo() {
      console.log("render Foo");
      return (
        <div>
          <h1>Foo</h1>
        </div>
      );
    };
    
    const a = <Foo />;
    console.log("<Foo /> created");
    
    export default function App() {
      const [count, setCount] = useState(0);
      const handleClick = () => {
        setCount((prev) => prev + 1);
      };
      console.log("render App");
      return (
        <div className="App">
          {count}
          <button onClick={handleClick}>click</button>
          {a}
        </div>
      );
    }

  • 如果直接將<Foo />填入 component 內，每次這個 component 被 re-render 的時候都會重新建立一個 React element，所以在 component 內部的 <Foo /> 縱使長相一樣，但仍然是不同的參考
  • 如果 <Foo /> 沒有動態的 props ，則可以踢出 component 外面，但如果是有動態的 props ，則可以提升到外層，並使用 props 將 <Foo /> 傳入，如下範例能夠做到在 Container 觸發 re-render 時，並不會觸發到 Foo 的 re-render

    import React, { useState } from "react";
    
    function Foo({ count }) {
      console.log("render Foo");
      return (
        <div>
          <h1>Foo</h1>
          <p>{`Foo count: ${count}`}</p>
        </div>
      );
    }
    
    function Container({ content }) {
      const [count, setCount] = useState(0);
      const handleClick = () => {
        setCount((prev) => prev + 1);
      };
      console.log("render Container");
      return (
        <div>
          <h1>Container</h1>
          <p>{`Container count: ${count}`}</p>
          <button onClick={handleClick}>{`Container click`}</button>
          {content}
        </div>
      );
    }
    
    export default function App() {
      const [count, setCount] = useState(0);
      const handleClick = () => {
        setCount((prev) => prev + 1);
      };
      console.log("render App");
      return (
        <div className="App">
          <h1>App</h1>
          <button onClick={handleClick}>{`App click`}</button>
          <Container content={<Foo count={count} />} />
        </div>
      );
    }

  • 總結兩個重點：
    1. 一定要使用 React element 的方式呼叫 component function 才會被視為 component，React 判斷是不是一個 component 實例是跟呼叫方式有關，跟定義方式無關
    2. 使用 React element 呼叫才能夠要求 React 去幫你呼叫，這是一種延遲呼叫的設計，也才能夠讓 React 去建立 component 實例，並且做到以下效果：
       • 從實例中取出資料讓 hooks 正確運作
       • 可以在某些時候跳過 component function re-render

  Q： 要避免 children 不必要的渲染，透過 React.memo 包起來跟用 props 傳遞，這兩者有什麼區別？
  A： 有區別，但能做到差不多的結果，通常東西是完全固定的話就不需要使用到 React.memo，去做 memo 會做額外的比較，也會花效能，雖然可能不大，但如果是 props 是動態的，除了提升到外層，也可以用 React.memo，只是 memo 會比較所有值是否相同，有的時候提出來會影響到抽象化看起來不直覺或是 component 設計獨立性好不好呼叫的問題，但 Zet 大多數情況下不會使用 React.memo，除非遇到效能問題，但就結果來說，這兩種做法都可以，但沒有一定要在什麼情況下怎麼樣做。
  Q： 通常用什麼方式檢查 component 渲染很多次
  A：
  console.log 是最簡單的方法，但如果很了解這個機制，本來就會很有意地避免這個問題，但有的情況是這個東西被 re-render 也沒差，因為效能耗費不大，但有的情況是這個東西就不應該放在這裡被 re-render，這在寫的時候，如果你了解這個機制就會特別注意這個情況，或是適合放在這裡，但遇到效能問題，那就會用一些方法處理。
  或是使用 React 開發者工具 的 profiler 來視覺化分析哪些 component 特別花時間跟多次被 re-render。
  基本習慣要養成好，但不需要過早優化，如果一開始寫就包 React.memo，那也不好，因為 memo 也會花額外的效能，遇到效能上的瓶頸時再來處理效能優化。