[React] 一些比較容易忘記的筆記

class + typescript 用法

現在大多的React新專案都改成用hooks了，但還是有一些老舊專案會遇到，這邊會來記錄一下用法。

生命週期

1. 當這個組件安裝到畫面上的時候

componentDidMount() {
  console.log('mount')
}

2. 當這個組件要被更新的時候

componentDidUpdate() {
  console.log('update', this.state)
}

3. 當這個組件要解除安裝的時候

componentWillUnmount() {
  console.log('btn unmount')
}

App.tsx

import React from 'react'

// Btn組件
type BtnProps = {
  clickHandler: () => void
}
type BtnState = {}

class Btn extends React.Component<BtnProps, BtnState> {
  constructor(props: BtnProps) {
    super(props)
  }

  // 組件「將要」被解除安裝時
  componentWillUnmount() {
    // TODO del
    console.log('btn unmount')
  }

  render(): React.ReactNode {
      return <button onClick={this.props.clickHandler}>+1</button>
  }
}

// App 組件
type AppProps = {}
type AppState = {
  count: number
}

class App extends React.Component<AppProps, AppState> {
  constructor(props: AppProps) {
    super(props)
    this.state = {
      count: 0
    }

    // 這一段程式碼，是保證this永遠指向APP，不管是window還是其他物件執行它
    this.countClickHandler = this.countClickHandler.bind(this)
  }

  countClickHandler() {
    // window
    // TODO del
    console.log('this', this)
    this.setState((prevState) => {
      return {
        count: prevState.count + 1
      }
    })
  }

  // 組件被安裝時
  componentDidMount() {
    // TODO del
    console.log('mount')
  }

  // 組件被更新的時候
  componentDidUpdate() {
    // TODO del
    console.log('update', this.state)
  }

  render(): React.ReactNode {
      return <>
        <h1>Count: {this.state.count}</h1>
        {this.state.count === 5 ? null : <Btn clickHandler={this.countClickHandler} />}
      </>
  }
}

export default App

React Hook 筆記

useState

冒泡事件範例

const Parent: React.FC = () => {
  let [count, setCount] = useState(0);
  return (
    <div onClick={() => setCount(prev => prev + 1)}>
      Parent clicked {count} times
      <Child />
    </div>
  );
}

const Child: React.FC = () => {
  let [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Child clicked {count} times
    </button>
  );
}

callback Function 沿用前一次狀態

const Counter: React.FC = () => {
  const [counter, setCounter] = useState(0);

  const handleClick = () => {
      function callbackFunc (prev: number) {
        return prev + 1
      }
      
      setCounter(callbackFunc);
      setCounter(callbackFunc);
      //使用callbackFunc才能記住前一次的狀態
  }

  return (
    <div className='App'>
      <h1>Counter 組件</h1>
      <div>
        counter: {counter}
      </div>
      <br/>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default Counter

useEffect

//[]不帶參數，只執行一次，類似class的componentDidMount
useEffect(() => {
  console.log('hello world')
}, [])

//counter有變化才會再次執行
let counter = 1;
useEffect(() => {
  console.log('hello world')
}, [counter])

//多個條件 其中一個改變即會觸發
useEffect(() => {
  console.log('hello world')
}, [counter, num])

let interval : NodeJS.Timeout | null = null;
//於元件外全域宣告

useEffect(() => {
  interval = setInterval(() => {
   console.log('hello world');
  }, 1000)

  return ()=>{
     if (interval !== null) {
      clearInterval(interval);
    }
  }
   //counter有變化才會再次執行，setInterval 若沒有return 清除side effect時，setInterval會重複被執行
}, [counter])

遠端api抓資料 / 自定義Hook

useRef

• 記憶當下的狀態current，但不會觸發render，useState則會

const sumRef = useRef(0);
console.log(sumRef.current); //0

• 使用useRef來獲取HTML元素

const App: React.FC = () => {
  const h2Ref = useRef<HTMLHeadingElement>(null);

  useEffect(() => {
    console.log(h2Ref.current);
  }, [])

  return (<h2 ref={h2Ref}>title</h2>)
}

export default App

useContext

定義 context

ModalContext.tsx

import React, { createContext, useState, useContext } from 'react';

const defaultValue = {
  isShow: false
}

const ModalContext = createContext(defaultValue)

//設定值
export const ModalProvider: React.FC = ({ children }) => {
  const [isShow, setIsShow] = useState(true)
  return <>
    <ModalContext.Provider value={{isShow}}>
      {children}
    </ModalContext.Provider>
  </>
}

// 取用值
export const useModalContext = () => {
  return useContext(ModalContext)
}

App.tsx

import React, { useState } from "react"
import { ModalProvider, useModalContext } from './context/ModalContext'

const Box: React.FC = () => {
  const data = useModalContext()
  console.log(data.isShow); //true
  return <div>Box</div>
}

const App: React.FC = () => {
  return (<ModalProvider>
    <p>hello world</p>
    <Box />
  </ModalProvider>)
}

export default App

useMemo & useCallback & memo

如果使用useEffect的dependency是物件類型，每次render物件的記憶體位置不同，所以會被視為不同值。

• 若要使用物件類型成為useEffect的dependency，可用useMemo來記憶物件的值

• 若要使用Function類型成為useEffect的dependency，可用useCallback來記憶

• 使用memo來減少子元件的重新render

import React, { useEffect, useState, useMemo, useCallback } from "react"

const Box: React.FC = memo({num}) => {
  return <div>Box {num}</div>
}

const App: React.FC = () => {
  const [num, setNum] = useState(0);
  const [value, setValue] = useState(false)
  
  const memoObj = useMemo(() => {
    const obj = {title: 'abc', data: {}};
    return obj;
  }, [])

  const memoFunc = useCallback(function() {
    console.log('memoFunc')
  }, [])

  useEffect(() => {
    console.log('useEffect callback')
  }, [memoObj, memoFunc1])

  return <>
    <Box num={num} /> //若沒有用memo記憶這個元件，每次setValue會重新render到子元件
    <button onClick={() => {setValue(!value)}}>
      render
    </button>
  </>
}

export default App