快樂學程式

Javascript在紅什麼？快跟著網頁設計小白🙆‍♀一起速速了解JS吧！

這篇文章專給…

• 彷彿聽過，對JS 似曾相似，但從來沒有真正了解
• 愛用Google analytics & inbound marketing (Hubspot) 的行銷人
• 覺得跟前端工程師錯頻，想了解一下他們星球的語言
• 想學互動式網頁設計，創建屬於自己的第一個網頁天堂

上次最後提到了 React hooks 的優缺和功用 ，也賣了好多關子，這次趁著「 JS 學習筆記」系列的終結篇的機會讓小白🙆‍♀把剩餘的 React JS 的核心觀念補上＆好好說明白

如果忘記 hooks 的概要的小小白們在繼續閱讀之前可以先看回去上一篇👆

總的來說，hooks 並不會取代我們原先對於 React 的認知，而是（向後）相容於原先的系統中。原先系統（包括 props, state, refs, lifecycle 等概念）也能透過 hooks 所提供的「更直接性的」API 來同時達成效率 (efficiency)＆簡化 (simplification)。

📌 話說從前，什麼又是 React 的生命週期 (Lifecycle) 呢？

正在學 React 想必都聽過「Lifecycle」，但許多人卻不解其意。

單就名字看來，「生命週期」一詞非常的「生物」（彷彿回到高中生物課😂）。實際上，的確如此。簡單來說，Lifecycle 所指的生命之期即是 React component 的一生：從出生入死中的酸甜苦辣。廢話不多說，就讓我們繼續看下去吧！

🦚 往往程式語言在命名上都十分傳神（如同 lifecycle 至少也有七八分到位），有人猜到我想講的例子嗎？

Overall,  React 的生命週期分成三大階段：掛載 => 更新 => 卸載

以下圖示給大家欣賞（會說欣賞是因為大多小白應該都和我一樣有看沒有懂🙃）

（概要版，呈現大觀念）

（細節版，寫出所有相關細項）

這張圖應由上往下看👇＆由左往右看👉

首先，第一步： 掛載 Mounting   — 表示初載入進DOM

流程：（對照上圖）

constructor() 執行

getDerivedStateFromProps()

render() 渲染

componentDidMount()

📎 componentDidMount() 示範：

class Header extends React.Component {

  constructor(props) {

    super(props);

    this.state = {bestplace: "Taiwan"};

  }

  componentDidMount() {

    setTimeout(() => {

      this.setState({bestplace: "Taipei"})

    }, 1000)

  }

  render() {

    return (

      <h1>The best place in the world is {this.state.bestplace}</h1>

    );

  }

}




ReactDOM.render(<Header />, document.getElementById('root'));

🦖 恐龍君小補充：

(a.)「render」是必要的流程！

(b.)  必須在最上層呼叫 hook，這樣 hooks 才會知道它該返回什麼

NG 作法：在迴圈、判斷式、或是嵌套 function 中呼叫 Hook

(c.)  Hooks 只在 React function 或是自定義中 hook 調用

NG 作法：在普通的 JS 函式中

再來，第二步： 更新 Updated   — 重新render

凡是 state 或 props 有改變，component 就必須重新渲染

流程：（對照上圖）

getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

📎 shouldComponentUpdate() 示範：（以下回傳 true 或 false 都可以隨需求自由變換）

class Header extends React.Component {

  constructor(props) {

    super(props);

    this.state = {bestplace: "Taiwan"};

  }

  shouldComponentUpdate() {

    return false;

  }

  changePlace = () => {

    this.setState({bestplace: "Taipei"});

  }

  render() {

    return (

      <div>

      <h1>The best place in the world is {this.state.bestplace}</h1>

      <button type="button" onClick={this.changePlace}>Change place</button>

      </div>

    );

  }

}




ReactDOM.render(<Header />, document.getElementById('root'));

📎 componentDidUpdate() 示範：

class Header extends React.Component {

  constructor(props) {

    super(props);

    this.state = {bestplace: "Taiwan"};

  }

  componentDidMount() {

    setTimeout(() => {

      this.setState({bestplace: "Taipei"})

    }, 1000)

  }

  componentDidUpdate() {

    document.getElementById("mydiv").innerHTML =

    "The best updated place is " + this.state.bestplace;

  }

  render() {

    return (

      <div>

      <h1>The best place in the world is {this.state.bestplace}</h1>

      <div id="mydiv"></div>

      </div>

    );

  }

}




ReactDOM.render(<Header />, document.getElementById('root'));

最後，第三步： 卸載 Unmounted —移出真實的DOM

流程：（對照上圖）

componentWillUnmount()

📎 componentWillUnmount() 示範：

class Container extends React.Component {

  constructor(props) {

    super(props);

    this.state = {show: true};

  }

  delHeader = () => {

    this.setState({show: false});

  }

  render() {

    let myheader;

    if (this.state.show) {

      myheader = <Child />;

    };

    return (

      <div>

      {myheader}

      <button type="button" onClick={this.delHeader}>Delete Header</button>

      </div>

    );

  }

}




class Child extends React.Component {

  componentWillUnmount() {

    alert("The component named Header is about to be unmounted.");

  }

  render() {

    return (

      <h1>Hello Iris!</h1>

    );

  }

}




ReactDOM.render(<Container />, document.getElementById('root'));

🦖 恐龍君小補充：

1. component 有兩種更新方式：setState＆forceUpdate
2. component 會隨父 component 的更新而更新（繼承，由上而下的資料流）

📌 上次簡單說明了 useState，那什麼又是 useEffect 呢？

我整理了下列 3 點，讓小小白們一次看明白：

1. useEffect 是個專用於封裝 side effects （或 effects) 的 hook，這樣才能有效分工，使關注點成功分離
2. 也可以把 useEffect 想成 componentDidMount ＆componentDidUpdate 和componentWillUnmounted 的綜合體，但切記仍是不一樣的概念。
3. useEffect 讓 functional component 也能介入 React 的 lifecycle，使 React 清楚 component 在渲染後要做些什麼，並且在 DOM 更新後幫助你呼叫先前你傳遞的函式。

如果使用傳統的生命週期函式，需要如以下表達（以下為 React 官網範例）：

componentDidMount() {

    document.title = `You clicked ${this.state.count} times`;

  }

  componentDidUpdate() {

    document.title = `You clicked ${this.state.count} times`;

  }

使用了 useState 就能簡化以上步驟（不需要考慮在更新或掛載階段），達到以上兩個生命週期函式的功效（API 的整合），我們來看看如何操作：

useEffect(() => {

    document.title = `You clicked ${count} times`;

  });

🦖 恐龍君小補充：

(a.) useEffect 和 componentDidMount 或是 componentDidUpdate 的不同在於由 useEffect 調動的 effect 不阻塞瀏覽器渲染與更新，因此以「效率」論是更有 CP 值得做法

(b.) useEffect 在每次渲染後都會執行（首次渲染和每次更新都會執行）

(c.) 使用完的 useEffect 視情況清除，想深入點這裡

這是 React JS 的最後一集介紹了，歡迎大家留言大聲喊出還想知道哪些 React 或是 JS 功能～ 有許願就有可能會成真唷！（我這邊會盡量加油🤣

這裡先拜過我的恩師Glove🙇‍♀

🎏 如果想更加了解 React JS 的「生命週期」，或是想更加了解「渲染」的人，這裡擺上 Glove 親筆部落格，非常建議和我一樣的小菜雞🐥上去爬個文～

Glove 另外也有在 Udemy 上開設 JS 課程 和 React 課程唷，特別適合唷想快速練功的人😎！（中文教學）🎏

之前是大菜雞🐥時認為說 Github 是個非常困難的地方（高手雲集，看都看不懂），不過仔細看過發現裡頭的寶藏～ 這裏放上 Github 官網，想查什麼案子直接打關鍵字就會出現相關資訊嘍！

/* 希望以上心得筆記和資訊有助於大家更了解 React 的運作～  如果覺得獲益良多歡迎繼續關注我！

有任何問題都不吝指教（底下留言💬），大家一起學習、一起進步喲🗣

那～我們在其他系列見嘍！👋👋👋 */

參考資料 References:

1. https://www.w3schools.com/react/react_lifecycle.asp
2. https://zh-hant.reactjs.org/docs/hooks-effect.html
3. https://www.cnblogs.com/marvintang1001/p/11867719.html
4. https://www.zybuluo.com/qinyun/note/1401500