前端菜鳥的react初體驗 Day15-Hook-useEffect

2022 iThome 鐵人賽

DAY 15

自我挑戰組

前端菜鳥的react初體驗系列第 15 篇

14th鐵人賽

chin_frontend

2022-09-30 22:44:51

397 瀏覽

分享至

今天是第十五天，不知道是不是因為確診越來越不舒服的關係，
我感到前所未有的絕望，覺得自己離放棄近在咫尺。

但我還是打開了這個頁面，要來談談Hook，談談useEffect，
然後打開文件看到第一句我的心態就炸裂了。

Effect Hook 讓你可以使用 function component 中的 side effect：

這是一段乍看之下每個字我都看得懂，但何在一起我卻完全不知道在說什麼的話。

好，回到最初的起點，先來看一下什麼是function component。

這個是function component

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

文件是這麼說的：

它接受一個「props」物件並回傳一個 React element。我們稱之為 function component，因為它本身就是一個 JavaScript function。

這個是Class Component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

雖然還搞不太清楚這兩個之間的具體差別是什麼，但總之我們知道，如果要用hook，我們要選用上面那種function component來建立我的組件。

那，side effect又是甚麼？？我只知道我本人現在吃藥的副作用有頭暈口乾^^
文件是這麼說的

資料 fetch、設定 subscription、或手動改變 React component 中的 DOM 都是 side effect 的範例。
React component 有兩種常見的 side effect：一種不需要執行清除，另一種則需要。

好，應該不是只有我看不懂。

於是我去求助維基百科，維基百科是這麼說的

In computer science, an operation, function or expression is said to have a side effect if it modifies some state variable value(s) outside its local environment, which is to say if it has any observable effect other than its primary effect of returning a value to the invoker of the operation.

粗淺的理解，大概就是如果這個function，修改了function之外的值，或是做了與function無關的事情就是一種副作用。
像是console.log改變了主控台的輸出，也是一種副作用。

其他還有一些常見的副作用們：