React---新擴展Hooks和Fragment

一、Hooks

1. React Hook/Hooks是什麼?

　　(1). Hook是React 16.8.0版本增加的新特性/新語法

　　(2). 可以讓你在函數組件中使用 state 以及其他的 React 特性

2. 三個常用的Hook

　　(1). State Hook: React.useState()

　　(2). Effect Hook: React.useEffect()

　　(3). Ref Hook: React.useRef()

3. State Hook

　　(1). State Hook讓函數組件也可以有state狀態, 並進行狀態數據的讀寫操作

　　(2). 語法: const [xxx, setXxx] = React.useState(initValue)  

　　(3). useState()說明:

        參數: 第一次初始化指定的值在內部作緩存

        返回值: 包含2個元素的數組, 第1個爲內部當前狀態值, 第2個爲更新狀態值的函數

　　(4). setXxx()2種寫法:

        　　setXxx(newValue): 參數爲非函數值, 直接指定新的狀態值, 內部用其覆蓋原來的狀態值

        　　setXxx(value => newValue): 參數爲函數, 接收原本的狀態值, 返回新的狀態值, 內部用其覆蓋原來的狀態值

4. Effect Hook

　　(1). Effect Hook 可以讓你在函數組件中執行副作用操作(用於模擬類組件中的生命週期鉤子)

　　(2). React中的副作用操作:

        發ajax請求數據獲取

        設置訂閱 / 啓動定時器

        手動更改真實DOM

　　(3). 語法和說明: 

       　　 useEffect(() => { 

         　　 // 在此可以執行任何帶副作用操作

          　　return () => { // 在組件卸載前執行

            　　// 在此做一些收尾工作, 比如清除定時器/取消訂閱等

          　　}

        　　}, [stateValue]) // 如果指定的是[], 回調函數只會在第一次render()後執行

    

　　(4). 可以把 useEffect Hook 看做如下三個函數的組合

        　　componentDidMount()

        　　componentDidUpdate()

        　　componentWillUnmount() 

5. Ref Hook

　　(1). Ref Hook可以在函數組件中存儲/查找組件內的標籤或任意其它數據

　　(2). 語法: const refContainer = useRef()

　　(3). 作用:保存標籤對象,功能與React.createRef()一樣

6.代碼

 1 import React from 'react'
 2 import ReactDOM from 'react-dom'
 3 
 4 //類式組件
 5 /* class Demo extends React.Component {
 6 
 7     state = {count:0}
 8 
 9     myRef = React.createRef()
10 
11     add = ()=>{
12         this.setState(state => ({count:state.count+1}))
13     }
14 
15     unmount = ()=>{
16         ReactDOM.unmountComponentAtNode(document.getElementById('root'))
17     }
18 
19     show = ()=>{
20         alert(this.myRef.current.value)
21     }
22 
23     componentDidMount(){
24         this.timer = setInterval(()=>{
25             this.setState( state => ({count:state.count+1}))
26         },1000)
27     }
28 
29     componentWillUnmount(){
30         clearInterval(this.timer)
31     }
32 
33     render() {
34         return (
35             <div>
36                 <input type="text" ref={this.myRef}/>
37                 <h2>當前求和爲{this.state.count}</h2>
38                 <button onClick={this.add}>點我+1</button>
39                 <button onClick={this.unmount}>卸載組件</button>
40                 <button onClick={this.show}>點擊提示數據</button>
41             </div>
42         )
43     }
44 } */
45 
46 function Demo(){
47     //console.log('Demo');
48 
49     const [count,setCount] = React.useState(0)
50     const myRef = React.useRef()
51 
52     React.useEffect(()=>{
53         let timer = setInterval(()=>{
54             setCount(count => count+1 )
55         },1000)
56         return ()=>{
57             clearInterval(timer)
58         }
59     },[])
60 
61     //加的回調
62     function add(){
63         //setCount(count+1) //第一種寫法
64         setCount(count => count+1 )
65     }
66 
67     //提示輸入的回調
68     function show(){
69         alert(myRef.current.value)
70     }
71 
72     //卸載組件的回調
73     function unmount(){
74         ReactDOM.unmountComponentAtNode(document.getElementById('root'))
75     }
76 
77     return (
78         <div>
79             <input type="text" ref={myRef}/>
80             <h2>當前求和爲：{count}</h2>
81             <button onClick={add}>點我+1</button>
82             <button onClick={unmount}>卸載組件</button>
83             <button onClick={show}>點我提示數據</button>
84         </div>
85     )
86 }
87 
88 export default Demo

二、Fragment

1.作用：可以不用必須有一個真實的DOM根標籤了

2.代碼

 1 import React, { Component,Fragment } from 'react'
 2 
 3 export default class Demo extends Component {
 4     render() {
 5         return (
 6             <Fragment key={1}>
 7                 <input type="text"/>
 8                 <input type="text"/>
 9             </Fragment>
10         )
11     }
12 }