<h2>useState</h2>
<h3>使用情境</h3>
<p>用於在函數組件中添加一些內部 state 以進行渲染或觸發重新渲染。這個 Hook 接受一個參數作為初始狀態，並
返回一個包含兩個元素的陣列：當前狀態和一個更新狀態的函數。</p>
<h3>使用範例</h3>
<pre><code class="language-jsx">const [state, setState] = useState(initialState);
setState(newState);
</code></pre>
<pre><code class="language-tsx">import React, {useState} from &#39;react&#39;;

function Counter() {
  const [count, setCount] = useState(0);

  return (
    &lt;div&gt;
      &lt;p&gt;You clicked {count} times&lt;/p&gt;
      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;/button&gt;
    &lt;/div&gt;
  );
}

export default Counter;
</code></pre>
<h3>基於前一個值更新 state</h3>
<ul>
<li>因為更新 state 是非同步操作，不會馬上發生，所以基於前一個值更新 state 需用函式處理</li>
</ul>
<pre><code class="language-jsx">setCount(prevCount =&gt; prevCount + 1);
</code></pre>
<h3>當 state 為 objects 或 array，如何更新</h3>
<pre><code class="language-jsx">const [user, setUser] = useState({name: &#39;John&#39;, age: 30});

setUser(prevUser =&gt; ({...prevUser, age: prevUser.age + 1}));
</code></pre>
<h3>注意事項</h3>
<ul>
<li><code>set</code> function 只會在下次渲染時更新 state，如果呼叫 <code>set</code> 之後馬上讀取 state，會拿到舊的 state</li>
<li>放進 <code>set</code> function 的值，透過 <code>Object.is</code> 判斷跟舊的 state 一樣時，React 就不會重新渲染該元件跟它
的子元件</li>
<li>React 會批量更新 state，意味者執行完所有 event handler 及呼叫完所有 <code>set</code> functions 之後，React 才
會更新 states，這是為了優化效能；如果要強制 React 提前更新螢幕，可以參考
<a href="https://react.dev/reference/react-dom/flushSync">flushSync</a> (該作法不常見且容易造成效能問題)</li>
</ul>
<h2>useRef</h2>
<h3>使用情境</h3>
<p>用於在組件中保存一個可變的值，這個值在組件的所有渲染中都會保持不變。當你需要從一個函數組件中引用一個
DOM 節點，或者保持任何可變值，這個值<strong>不會觸發組件重新渲染</strong>。</p>
<h3>使用範例</h3>
<pre><code class="language-jsx">import React, {useRef} from &#39;react&#39;;

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () =&gt; {
    // `current` refers to the text input element mounted on **DOM**
    inputEl.current.focus();
  };

  return (
    &lt;&gt;
      &lt;input ref={inputEl} type=&quot;text&quot; /&gt;
      &lt;button onClick={onButtonClick}&gt;Focus the input&lt;/button&gt;
    &lt;/&gt;
  );
}

export default TextInputWithFocusButton;
</code></pre>
<pre><code class="language-jsx">import { useRef } from &#39;react&#39;;

function Stopwatch() {
  const intervalRef = useRef(0);
  // ...

function handleStartClick() {
  const intervalId = setInterval(() =&gt; {
    // ...
  }, 1000);
  intervalRef.current = intervalId;
}
</code></pre>
<h3>注意事項</h3>
<ul>
<li><strong><code>useRef()</code></strong> 的返回值在組件的所有渲染中都將保持不變；在下一次渲染時，<code>useRef</code> 將返回相同的
object。</li>
<li>可以更改 <strong><code>useRef</code></strong> 返回的 <strong><code>ref</code></strong> 的<code>current</code>屬性以儲存資料並稍後讀取。</li>
</ul>
<h2>useEffect</h2>
<h3>使用情境</h3>
<p>它告訴 React 在完成對 DOM 的更改後運行你的“副作用”函數。副作用可能包括資料獲取、訂閱或手動更改 React
組件之外的 DOM。</p>
<h3>使用範例</h3>
<pre><code class="language-jsx">useEffect(() =&gt; {
  // side effect

  return () =&gt; {
    // clear function
  };
}, [dependencies]);
</code></pre>
<pre><code class="language-jsx">import React, {useState, useEffect} from &#39;react&#39;;

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() =&gt; {
    // 使用瀏覽器的 API 更新文件標題
    document.title = `You clicked ${count} times`;

    // 返回的函數將在組件卸載或重新渲染前被調用，進行清理工作
    return () =&gt; {
      document.title = `React App`;
    };
  }, [count]); // 依賴於 count 變數，當 count 變化時，執行此副作用

  return (
    &lt;div&gt;
      &lt;p&gt;You clicked {count} times&lt;/p&gt;
      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;/button&gt;
    &lt;/div&gt;
  );
}

export default Example;
</code></pre>
<h3>注意事項</h3>
<ul>
<li>預設情況下，React 將在每次渲染後運行 <code>useEffect</code> 內的程式碼(side effect)，包括第一次渲染。</li>
<li>如果 <code>useEffect</code> 有需要清理的工作，比如取消訂閱或清理計時器，你可以返回一個函數，React 將在組件卸
載或重新渲染前調用它。</li>
<li>使用 <code>useEffect</code> 要包含依賴項<code>[]</code>，否則會導致數據過時或無限循環。依賴項可包含所有須”訂閱”的變數。</li>
</ul>
<h2>useContext</h2>
<h3>使用情境</h3>
<p>用於在多個元件之間傳值，避免 prop drilling</p>
<h3>使用範例</h3>
<pre><code class="language-jsx">const MyContext = React.createContext();

function MyComponent() {
  const contextValue = useContext(MyContext);
  // ...
}

function App() {
  const [value, setValue] = useState({count: 0});

  return (
    &lt;MyContext.Provider value={value}&gt;
      &lt;MyComponent /&gt;
      &lt;button onClick={() =&gt; setValue({count: value.count + 1})}&gt;Increment&lt;/button&gt;
    &lt;/MyContext.Provider&gt;
  );
}
</code></pre>
<pre><code class="language-jsx">function App() {
  const value = {count: 0};

  return (
    &lt;MyContext.Provider value={value}&gt;
      &lt;MyComponent /&gt;
      &lt;button onClick={() =&gt; value.count++}&gt;Increment&lt;/button&gt;
    &lt;/MyContext.Provider&gt;
  );
}
</code></pre>
<h3>注意事項</h3>
<ul>
<li><strong><code>useContext(MyContext)</code></strong> 只是讓你能夠讀取 context 的值以及訂閱 context 的變化。你仍然需要在上層
組件樹中使用 <strong><code>&lt;MyContext.Provider&gt;</code></strong> 來為下層組件提供 context。</li>
<li>context value 更改時，會觸發重新渲染；如果 context value 是 object，那 object 裡面的值更改不會有重
新渲染，只有換新的 object 才會重新渲染</li>
</ul>
<h2>Reference</h2>
<ul>
<li><a href="https://react.dev/reference/react#state-hooks"><strong>React doc - built-in hooks</strong></a></li>
<li><a href="https://medium.com/@AbidKazmi/all-react-hooks-in-one-short-4b0ed4b5a6e4">All React hooks in one short.</a></li>
<li><a href="https://www.youtube.com/watch?v=bGzanfKVFeU&t=228s">Goodbye, useEffect - David Khourshid</a></li>
</ul>


幫助 React 新手在實際開發中更有效地使用 useState, useRef, useEffect, useContext Hooks，提升開發網站的效率。

React tips: how to use built-in hook

本文將介紹現金流量表的本質，以及製作現金流量表的方法，接著一一用直接法呈現加密貨幣交易所的營運活動造成的現金流量表變化，期望達到示範作用並引起更多加密貨幣交易所監管相關的討論。

撰寫加密貨幣交易所現金流量表指南

<h2>1. 效能指標介紹</h2>
<p>可參考：
<a href="https://github.com/CAFECA-IO/KnowledgeManagement/blob/master/tools/web-vitals.md#web-vitals">web-vitals</a></p>
<ul>
<li>測試工具 : 使用 Google 的
<a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> 來檢測頁面加載速度。</li>
<li>First Contentful Paint (FCP) : 衡量當第一塊內容（例如文字或圖像）在用戶的屏幕上被渲染的時間。 建議
完成時間為 2.5 秒內 。</li>
<li>Largest Contentful Paint (LCP) : 衡量最大內容元素（例如圖片或文本區塊）完成渲染在屏幕上的時間。 建
議頁面之 FID 應低於 100 毫秒 。</li>
<li>Total Blocking Time (TBT) : 衡量在首次繪製和完全交互之間所有阻塞事件的總時間。 建議完成時間為 200
毫秒內 。</li>
<li>Cumulative Layout Shift (CLS) : 衡量視覺上的內容如何在頁面加載時移動，代表布局的穩定性。 建議分數
應低於 0.1 。</li>
<li>Speed Index (SI) : 衡量頁面內容呈現速度的指標，反映出用戶看到頁面內容的速度。 建議完成時間在 3.5
秒以內。</li>
</ul>
<h2>2. 改善 First Contentful Paint (FCP)</h2>
<p>利用 Next.js 的服務器渲染（SSR）或靜態網站生成（SSG）特性，能更快地提供首次內容，從而改善 FCP。</p>
<p>可參考：
<a href="https://github.com/CAFECA-IO/KnowledgeManagement/blob/master/NextJs/SSR_vs_SSG.md#%E4%BB%80%E9%BA%BC%E6%99%82%E5%80%99%E7%94%A8-server-side-rendering-%E8%88%87-static-side-generation">什麼時候用 Server Side Rendering 與 Static Side Generation</a></p>
<p>以下簡單解釋 SSG 跟 SSR 的差別跟例子：</p>
<h3>SSG</h3>
<ul>
<li>想像你要開一個咖啡店，但是你只賣一種咖啡。每個客人來了都要等你現場煮，這樣會很慢對吧？如果你事先煮
好一大壺咖啡，每個客人來了就直接倒給他們，這樣多快多好！SSG 就是這樣，它事先把所有的網頁都“煮”好（
也就是生成好），等到有人來訪問的時候，直接給他們。</li>
<li>頁面在構建時生成，並且每個請求都重用相同的 HTML。這提供了極佳的性能和 SEO 優勢。在 Next.js 裡，你
只要在<code>pages</code> 目錄下建一個檔案（比如 <code>about.js</code>），然後 Next.js 在 build 階段會自動把它變成一個靜
態頁面。</li>
</ul>
<pre><code class="language-jsx">// pages/data.js
export default function Data({data}) {
  // 假設資料是一個包含多個項目的陣列
  return (
    &lt;div&gt;
      &lt;h1&gt;資料列表：&lt;/h1&gt;
      &lt;ul&gt;
        {data.map((item, index) =&gt; (
          &lt;li key={index}&gt;{item}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/div&gt;
  );
}

export async function getStaticProps() {
  // 從API獲取數據
  const res = await fetch(&#39;&lt;https://api.example.com/data&gt;&#39;);
  const data = await res.json();

  // 返回數據作為props
  return {
    props: {data},
    revalidate: 1, // 每秒重新生成頁面一次
  };
}
</code></pre>
<h3>SSR</h3>
<ul>
<li>現在想像你的咖啡店開始賣很多種不同的咖啡。每個客人來了都可以點不同的咖啡，這時候你不能事先都煮好，
因為你不知道他們要什麼。但是你可以等他們來了之後，現場為他們煮他們想要的咖啡。這樣每個人都可以喝到
他們想要的咖啡，但是他們可能要等一下。SSR 就是這樣，每次有人來訪問網站的時候，它都會為他們生成一個
新鮮的頁面。</li>
<li>每次請求時，都會在伺服器上實時生成頁面。這有利於 SEO 並且允許頁面內容根據用戶請求動態更改。在這個
例子裡，每次有人訪問<code>/profile</code> 頁面的時候， <code>getServerSideProps</code>會在伺服器上運行，並且生成一個新的
頁面給用戶。</li>
</ul>
<pre><code class="language-jsx">// pages/profile.js
export default function Profile({username}) {
  return &lt;div&gt;Hello, {username}!&lt;/div&gt;;
}

export async function getServerSideProps(context) {
  // 假設我們從一個API獲取用戶名
  const response = await fetch(&#39;&lt;https://api.example.com/user&gt;&#39;);
  const data = await response.json();

  return {
    props: {
      username: data.username,
    },
  };
}
</code></pre>
<h2>3. 改善 Largest Contentful Paint (LCP)</h2>
<p>優化圖像和媒體檔案大小，並利用 Next.js 的<code>Image</code>組件來實現圖片的延遲加載和自動格式轉換。</p>
<pre><code class="language-jsx">import Image from &#39;next/image&#39;;

function MyImageComponent() {
  return &lt;Image src=&quot;/my-image.jpg&quot; alt=&quot;Picture&quot; width={500} height={500} /&gt;;
}
</code></pre>
<h2>4. 改善 Total Blocking Time (TBT)</h2>
<p>避免大量的 JavaScript 在主線程上執行，利用 Next.js 的程式碼拆分和懶加載特性來減少主線程的阻塞時間。</p>
<pre><code class="language-jsx">import dynamic from &#39;next/dynamic&#39;;

const DynamicComponent = dynamic(() =&gt; import(&#39;../components/hello&#39;));

function MyPage() {
  return &lt;DynamicComponent /&gt;;
}
</code></pre>
<h2>5. 改善 Cumulative Layout Shift (CLS)</h2>
<p>保持布局的穩定性，避免在加載時元素的移動。指定圖片和影片的尺寸，並避免在加載時插入新內容。</p>
<pre><code class="language-jsx">&lt;img src=&quot;/my-image.jpg&quot; alt=&quot;Picture&quot; width=&quot;500&quot; height=&quot;500&quot; /&gt;
</code></pre>
<h2>6. 改善 Speed Index (SI)</h2>
<p>利用 Next.js 的優化特性，例如程式碼拆分、懶加載、和 SSR 或 SSG 來改善頁面的加載速度和交互速度。此外
，配置 CDN 和優化靜態資源的傳送也能有助於提高 Speed Index。</p>
<h3>配置 Content Delivery Network (CDN)</h3>
<p>Content Delivery Network (CDN) 是一種服務，它通過在地理上分散的伺服器來儲存和提供網站的靜態資源（例
如圖片、CSS、JavaScript）。當用戶訪問網站時，CDN 會從離用戶最近的節點提供資源，從而減少了加載時間。
配置 CDN 的基本步驟如下：</p>
<ol>
<li>選擇 CDN 提供商 :</li>
</ol>
<ul>
<li>選擇一個 CDN 提供商，例如 Cloudflare、AWS CloudFront 或 Google Cloud CDN。</li>
</ul>
<ol start="2">
<li>註冊和設置 CDN 賬戶 :</li>
</ol>
<ul>
<li>跟隨 CDN 提供商的指南註冊並設置你的賬戶。</li>
</ul>
<ol start="3">
<li>配置 CDN :</li>
</ol>
<ul>
<li>在 CDN 控制台中，創建一個新的 CDN 分發並配置你的網站的域名和源伺服器地址。</li>
</ul>
<ol start="4">
<li>更新 DNS 記錄 :</li>
</ol>
<ul>
<li>更新你的域名的 DNS 記錄，以指向 CDN 服務而不是你的原始伺服器。</li>
</ul>
<ol start="5">
<li>驗證配置 :</li>
</ol>
<ul>
<li>確保你的網站通過 CDN 正確地傳遞，並檢查加載速度是否有所改善。</li>
</ul>
<h3>避免不必要的重新渲染</h3>
<h3>檢查重新渲染的工具</h3>
<p>勾選 Paint flashing 之後，會在 component 被重新繪製時標註螢光色</p>
<p><img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/ca511547-1f2c-4469-aed6-5b661ed04381" alt="image"></p>
<img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/3a9cad5e-aed1-41c0-be43-060b6e297a52" width="600">

<h3>React Developer Tools</h3>
<ul>
<li><p>從 Chrome 下載
<a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">React Developer Tools</a>
之後，打開瀏覽器 dev tool 可以看到 <code>Components</code> 跟 <code>Profiler</code>。其中 <code>Profiler</code> 可以錄製在網站重整
之後用戶在網站執行操作之後造成的 render。</p>
</li>
<li><p>勾選 <code>Highlight updates when components render</code> ，在組件重新渲染時，可以看到組件被線條框住，綠色線
條代表重新渲染的次數較少，黃色線條代表被重新渲染許多次。</p>
</li>
</ul>
<img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/cb9509be-9172-414b-a649-82b5a7a50804" width="400">

<img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/f6a19871-4fd9-4ece-ba4f-ce51f293aa17" width="400">

<ul>
<li>在造成渲染的原因中，“<code>This is the first time the component rendered.</code>”是正常的原因，其他原因如
“<code>The parent component rendered.</code>”跟“<code>Context changed</code>” 等等是效能優化時須斟酌是否能改善的地方</li>
</ul>
<p><img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/518893d0-13ce-4ace-ba84-d7fa1aefd140" alt="image"></p>
<p><img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/7b70cd2a-ced5-448c-8909-0fb6a926fa09" alt="image"></p>
<h3>用 React.memo</h3>
<p><code>React.memo</code> 是一個 React 提供的高階組件，它可以讓你在組件的 props 未改變時避免重新渲染。當你將一個
組件包裹在 <code>React.memo</code> 中，該組件只有在其 props 發生變化時才會重新渲染。</p>
<pre><code class="language-jsx">const MemoizedComponent = memo(SomeComponent);
</code></pre>
<p>這意味著，即使父組件重新渲染，只要 <code>MemoizedComponent</code> 的 props 沒有改變，它就不會重新渲染。這可以提
高 React 應用的性能，特別是在大型應用中。</p>
<h3>用 useMemo 跟 useCallback</h3>
<ul>
<li>當使用 <code>React.memo</code> 時，你的組件會在任何 prop 不與之前的值淺比較相等(shallow equality)時重新渲染。
這意味著 React 使用 <code>Object.is</code> 比較來確定 props 是否有所改變。例如， <code>Object.is(3, 3)</code> 返回
<code>true</code> ，但 <code>Object.is({}, {})</code> 返回 <code>false</code> 。<ul>
<li><a href="https://github.com/facebook/fbjs/blob/main/packages/fbjs/src/core/shallowEqual.js#L39-L67">shallowEqual source code</a></li>
</ul>
</li>
<li>要充分利用 <code>React.memo</code> ，你應該盡量減少 props 的改變次數。例如，如果 prop 是一個 object，你可以使
用 <code>useMemo</code> 防止父組件每次重新渲染時都重新創建該 object：</li>
</ul>
<pre><code class="language-jsx">function Page() {
  const [name, setName] = useState(&#39;Taylor&#39;);
  const [age, setAge] = useState(42);
  const person = useMemo(() =&gt; ({name, age}), [name, age]);
  return &lt;Profile person={person} /&gt;;
}
</code></pre>
<h3>避免在 component 裡創造新的 static object 或 static array</h3>
<p>在 component 裡面的 object 或 array，會隨著 re-render 而重新計算或重新生成，如果是靜態變數，可以搬到
component 外面，避免重新生成。</p>
<pre><code class="language-jsx">const options = {
  serverUrl: &#39;https://localhost:1234&#39;,
  roomId: &#39;music&#39;
};

function ChatRoom() {
  const [message, setMessage] = useState(&#39;&#39;);

  useEffect(() =&gt; {
    const connection = createConnection(options);
    connection.connect();
    return () =&gt; connection.disconnect();
  }, []); // ✅ All dependencies declared
  // ...
</code></pre>
<h3>使用狀態管理工具</h3>
<ul>
<li>打開 React developer tool 的 <code>Highlight updates when components render</code>，從
<a href="https://codesandbox.io/s/heuristic-diffie-iqhnqg?file=/pages/context-page.js">Code Sandbox example</a>
可以看到 context 會造成所有組件重新渲染，但使用狀態管理工具則可以避免不必要的組件重新渲染</li>
<li>context 的寫法是用 provider 包住所有組件，這樣會在 provider 值更新後，重新渲染 <code>Winner</code> 跟
<code>Players</code><pre><code class="language-jsx">export default function ContextComponent() {
  return (
    &lt;div className={styles.container}&gt;
      &lt;main className={styles.main}&gt;
        &lt;StoreContextProvider&gt;
          &lt;Winner /&gt;
          &lt;Players /&gt;
        &lt;/StoreContextProvider&gt;
      &lt;/main&gt;
    &lt;/div&gt;
  );
}
</code></pre>
</li>
<li>使用 Zustand 則可以只讓該 <code>Player</code> 跟 <code>Winner</code> 重新渲染</li>
</ul>
<h3>TailwindCSS 的 CSS 優化解法</h3>
<p>可通過以下配置跟指令壓縮 CSS，但在壓縮前後，透過 dev tool 的 Network 看到 CSS 大小跟時間沒有太大差別
。</p>
<ul>
<li>壓縮前
<img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/78f6c8a3-1c3f-4d1a-bd17-ae984467ef8e" alt="image"></li>
<li>壓縮後
<img src="https://github.com/CAFECA-IO/KnowledgeManagement/assets/20677913/fafa0013-6b2d-4822-89ac-0f842ac5db78" alt="image"></li>
<li><code>npx tailwindcss -o build.css --minify</code></li>
</ul>
<pre><code class="language-jsx">// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === &#39;production&#39; ? {cssnano: {}} : {}),
  },
};
</code></pre>
<h1>參考資料</h1>
<ul>
<li><a href="https://nextjs.org/learn/seo/improve">Improving your Core Web Vitals</a></li>
<li><a href="https://tailwindcss.com/docs/optimizing-for-production">Optimizing for Production - TailwindCSS</a></li>
<li><a href="https://react.dev/reference/react/memo">Should you add memo everywhere?</a></li>
<li><a href="https://react.dev/learn/removing-effect-dependencies#does-some-reactive-value-change-unintentionally">Does some reactive value change unintentionally?</a></li>
<li><a href="https://www.youtube.com/watch?v=4U37IRrt_zQ">React Developer Tools | Components &amp; Profiler</a></li>
<li><a href="https://medium.com/inato/prevent-re-renders-in-your-react-app-using-react-profiler-93c492110e30">Improve your React app performance using React Profiler</a></li>
<li><a href="https://github.com/facebook/fbjs/blob/main/packages/fbjs/src/core/shallowEqual.js#L39-L67">shallowEqual source code</a></li>
<li><a href="https://juejin.cn/post/7170364934889406495">我一直以为这就是 JS 中的浅比较，直到...</a></li>
<li><a href="https://codesandbox.io/s/heuristic-diffie-iqhnqg?file=/pages/context-page.js">Code sandbox - heuristic-diffie-iqhnqg</a></li>
</ul>


在現代網站開發中，效能是不可忽視的要素。以下將探討如何利用 Next.js 與 TailwindCSS 來打造效能卓越的網 站。

Language

Language

React tips: how to use built-in hook

撰寫加密貨幣交易所現金流量表指南

用 Next.js 與 TailwindCSS 創建效能良好的網站