# React 一些重點筆記

###### tags: `react`

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state

因為 class component很笨重，需要去繼承

extends React.Component，當我們需要使用一些簡單的元件

卻要跟著ES6 class 規範去走，導致語法看起來很複雜

2019年 React推出了React hook 在React的邏輯中心伸出鉤子

拉住所有產生的元件

這樣的概念就像是「元件用鉤子勾在邏輯中心的固定位置」，所以稱為Hook。

改替換成

function App (props){} 或 const App = (props) => {}

### Class component
需繼承React.Component
具有生命週期，可以針對某些情境決定是否渲染，ex shouldComponentUpdate()
具有state (Stateful component)
需要實作render方法
擁有this
每次都可以拿到最新的this.props，因為this隨時都在變化，
### Functional component
沒有生命週期 （React Hook userEffect 出現後，就有生命週期了！）
沒有state（Stateless），所以被稱為無狀態組件（但React Hook useState出現後就可以有state了！）
可以用arrow function 宣告或是一般的function
沒有this
編譯更快（因為不用將class轉換成es5
props會一直是原本傳進來的那個，而不會跟著更新，閉包的概念

## React hook 新增的函式

### useState

const [isOpen,setIsOpen] = useState(false);

### useEffect

### useRef

useRef是一個函式，跟useState一樣接收一個參數，作為變數初始值。差別是useRef回傳的是一個物件，裡面只有一個屬性current:

const data = useRef("初始資料")
console.log(data)
// { current: "初始資料" }

React會確保useRef回傳出來的這個物件不會因為React元件更新而被重新創造。

### usePrevious

取代的生命週期
componentDidMount
componentWillUnmount

reference，中文翻譯是「參考」。聽起來好像有點奇怪，但他在程式中一般是指「變數指向的記憶體位置上對應到的值」。

當你要在React做SSR時，因為useLayoutEffect和usetEffect都不會在server-side執行，有需要useLayoutEffect的元件就可能會以不符你的預期的方式運作。