kusapi.aaa 給初入JS框架新手的React.js入門 - b05313fsldsp/web-for-kusapi GitHub Wiki

給初入JS框架新手的React.js入門 系列 : https://ithelp.ithome.com.tw/users/20116826/ironman/2278

Andy Chang (BunnyPlayGG) iT邦新手 4 級 ‧ 點數 493 國立成功大學資訊工程學系

import React, { useEffect } from "react"


'''15:10 9/9/2021 - b1 - MyScript.js <=  ChartsScreen.js

URL	:	https://github.com/b05313fsldsp/web-for-kusapi/wiki/MyScript.js

import React, { useState, useEffect } from "react";


HINT	-	

useEffect(() => STUDY.a-hook- 



HINT	-	ES6 - 箭頭函式（arrow functions）

useEffect(() => STUDY.a-hook- 

  useEffect( () => { history.push("/");}, [history, userInfo]);

===
a.

import React, { useEffect } from "react"

---

生命週期 - 1. - componentDidMount + 2. - componentWillUnmount + 3. - componentDidUpdate => useEffect

# React hook兩大守則

1. 只能在最外層scope宣告
2. 只能在function component或custom hook中使用

# useEffect基本語法

useEffect接收兩個參數，

第一個是一個函式，定義componentDidMount或componentDidUpdate要做什麼事，此函式的回傳值也要是一個函式，表示componentWillUnmount 要做什麼事。

第二個是一個array，裡面是定義當哪些變數被改變時，這個useEffect要重新被觸發。有點像是過去我們在componentDidUpdate寫prevState!=this.state這種感覺。

# useEffect替代純componentDidMount

第二個參數為空array時(不是省略歐)，代表除了第一次以外，接下來每次re-render時，沒有任何東西的改變可以重新觸發useEffect，所以就等同於componentDidMount。

useEffect(() => {
    /* 下面是 componentDidMount */
    
    
    /* 上面是 componentDidMount */
    
}, []); 

/* 第二個參數是用來限定當哪些變數被改變時useEffect要觸發 */