前言

昨天的文章利用 componentDidMount 結合 D3 ，但相信讀者一定會覺得這樣的寫法又臭又長，而且這個 class 裡面也才寫了一個 componentDidMount 而已，是不是覺得有點大材小用了呢？所以今天就要利用 React Hook 來幫助這個昨天寫完的元件進行瘦身了XD

先備知識

還記得 Day09 介紹的 React Hook 嗎？其實像這種只需要寫普通的 Functional Component 就可以的元件，就可以利用 React Hook 來讓這些 Functional Component 能做的事情變得更多，所以今天的文章就是要好好的利用 React Hook 來改變昨天的寫法。

useEffect

今天要利用的 Hook 是 useEffect ， useEffect 的出現就是為了讓 Functional Component 可以模擬最基本的 Component life cycle ，所以今天的繪製流程就是要把昨天的 componentDidMount 改成 useEffect 了，基本上整體的寫法會跟昨天的寫法差不多，只是把 React Component 改成 React Hook 而已，廢話不多說馬上開始今天的繪製流程吧！

繪製流程

為了讓大家可以順利比較 React.Component 與 React Hook 的差別，所以這邊筆者會用折線圖的方式來進行 React Hook 的串接，由於今天的文章是 React Hook ，所以一開始要先創立一個 Function Component 。

const LineChart = () => {
  // ...
}

再來就是在裡面撰寫之前寫在 index.html 的內容，不過 Functional Component 就沒有 render() 可以用了，這邊直接 return HTML 即可了。

return (
  <div>
    <div className="chart-title">
      <div className="mark" id="Google">
        <div className="google-mark circle" />
        Google
      </div>
      <div className="mark" id="Facebook">
        <div className="facebook-mark circle" />
        Facebook
      </div>
    </div>
    <div id="line" />
  </div>
)

最後就是利用 useEffect 來模擬 componentDidMount 啦！

import React, { useEffect } from 'react'
import view from '../../../line chart/view'

useEffect(() => {
  view.multi_line_chart('line')
})

組合起來

最後筆者有把上面流程所講的程式碼都丟到 GitHub 上，有興趣想要參考的讀者歡迎上去參考這些範例碼。

line chart

總結

今天終於把 React 跟 D3 結合的內容都介紹完了，希望讀者未來在進行資料視覺化的時候也不用擔心 React 沒辦法跟 D3 好好結合了，甚至以前寫的 D3 程式碼都可以不用重寫是不是相當方便呢XD

如果對於今天的文章有任何問題歡迎在下面留言給我，沒問題的話明天就要來總結一下全部的系列文內容了！