React: 函數式組件

1. 簡介

函數式組件本質上就是一個JS函數
作為一個組件，至少包括一些結構代碼

2. 示例代碼

展開代碼

3. 運行原理

1. ReactDOM.render解析組件標簽
2. 解析到組件為函數式組件，調用該函數，將返回的虛擬DOM轉為真實DOM呈現在頁面
3. 普通JS函數中的this指向的是window對象，babel將JSX代碼翻譯為JS代碼時，開啟的嚴格模式（use strict）,此時函數中的this的值為undefined

4. hooks擴展

1. State Hook

可以讓函數組件有state狀態,並對狀態進行讀取和更新
語法: const [count,setCount] = React.useState (0);

• number: 指定狀態的數據類型
• 0: 狀態的初始值
• count: 狀態名稱,可以通過該字段引用狀態的屬性值
• setCount: 用於更新狀態的函數,有兩種寫法:

1. 傳入一個狀態值,覆蓋原來的狀態值
2. 傳入一個函數,函數的入參為原來的狀態值,函數必須有返回值,返回值作為新的狀態值

• 調用setCount函數更新時會觸發組件的重新render,內部會緩存每個狀態對應的值,保證狀態值不丟失

2. Effect Hook

在函數的指定操作之前執行指定函數,類似於類式組件的生命周期函數
語法:

useEffect(() => { 
          // 在此可以執行任何帶副作用操作
          doSomething()
          return () => { // 在組件卸載前執行
            // 在此做一些收尾工作, 比如清除定時器/取消訂閱等
          }
        }, [stateValue]) // 如果指定的是[], 回調函數只會在第一次render()后執行

• 第一個參數為一個函數,在組件掛載后會執行該函數的內部邏輯,相當於 componentDidMount
• 若第一個函數返回了一個新的函數,在組件卸載前會執行這個返回的函數,相當於 componentWillUnmount
• 第二個參數為一個數組,組件會監聽數組中的對象,這些對象發生變化時會重新渲染組件,相當於 componentDidUpdate

1. 若不傳數組參數,則默認監聽所有的useState,任意一個發生變化則重新渲染組件
2. 若傳一個[]空數組,則表示不進行監聽,回調函數只在第一次render后執行一次
3. 若在數組內傳入其他對象,則該對象發生變化時重新渲染組件

3. Ref Hook

在函數組件中存儲任意標簽對象,功能和類式組件中的React.createRef()一樣
語法:
const myRef = React.useRef() <input type="text" ref={myRef}/>
通過myRef可以獲取input標簽