一、StateHook

在函式元件中使用state，React.useState

 1 import React from 'react'
 2 
 3 function Demo(){
 4   const [count, setCount] = React.useState(0)
 5   
 6   function add(){
 7     // 第一種寫法
 8     // setCount(count + 1)
 9     
10     // 第二種寫法：函式
11     setCount(count => count + 1)
12   }
13   return(
14       <div>
15
 
         <h2>當前求和為：{count}</h2>
16       <button onClick={add}>點我+1</button>
17     </div>
18   )
19 }
20 export default Demo

二、EffectHook

在函式元件中執行副作用操作，React.useEffect

• 副作用操作：傳送請求、設定訂閱/啟動定時器、手動更改真實DOM
• EffectHook等於：
  • componentDidMount
    
  • componentDidUpdate
  • componentWillUnmount
• 語法

1 React.useEffect(() => {
2   // 副作用操作：第一次掛載和之後更新都會執行
3   // return返回值：元件解除安裝前執行，做一些收尾工作，如清除定時器、取消訂閱
4 },[]) // 如果指定的是[]，回撥函式只會在第一次render後呼叫

案例

 1 import React from 'react'
 2 import ReactDOM from 'react-dom'
 3 
 4 function Demo(){
 5   const [count, setCount] = React.useState(0)
 6   
 7   React.useEffect(() => {
 
 8     // 副作用操作
 9     let timer = setInterval(() => {
10       setCount(count => count + 1)
11     },1000)
12     // 返回值：元件解除安裝前執行，做一些收尾工作，如清除定時器、取消訂閱
13     return ()=> {
14       clearInterval(timer)
15     }
16   },[]) // 如果指定的是[]，回撥函式只會在第一次render後呼叫
17   
18   function add(){
19     setCount(count => count + 1)
20   }
21   
22   // 解除安裝元件的回撥
23   function unmount(){
24       ReactDOM.unmountComponentAtNode(
25       document.getElelmentBeId('root')
26     )
27   }
28   return(
29       <div>
30         <h2>當前求和為：{count}</h2>
31       <button onClick={add}>點我+1</button>
32       <button onClick={unmount}>解除安裝元件</button>
33     </div>
34   )
35 }
36 export default Demo

三、RefHook

標記節點，功能與createRef一樣

 1 import React from 'react'
 2 
 3 function Demo(){
 4   const [count, setCount] = React.useState(0)
 5   const myRef = React.useRef()
 6   
 7   function add(){
 8     setCount(count => count + 1)
 9   }
10   function show(){
11     console.log(myRef.current.value)
12   }
13   return(
14       <div>
15       <input type="text" ref={myRef}/>
16         <h2>當前求和為：{count}</h2>
17       <button onClick={add}>點我+1</button>
18       <button onClick={show}>點我提示資料</button>
19     </div>
20   )
21 }
22 export default Demo