什么是hook？16.8版本出現的新特性。可以在不編寫class組件的情況下使用state以及其它的React特性

為什么有hook？class組件很難提取公共的重用的代碼，然后反復使用；不編寫類組件也可以使用類組件的狀態state。hook解決函數組件很多功能的問題（state \ 生命周期 \ ref）

hook都是以useXxx開頭，并且必須在函數組件內部使用，不能在外面用，否則報錯

useState

使用時需要 import {useState} from "react";

let [a,setA]=useState(1);
a：變量名，setA：設置前一個參數的函數，useState(初始化值)：此函數返回一個數組對象[]
值：初始化的值，函數：為了修改設置的初始值

setXxx(修改值的方法)，這個函數是一個異步函數
調用完不會立刻執行，而是等待頁面上所有需要的內容修改完畢之后執行，和虛擬dom的機制有關

import './App.css';
// import {Component} from "react";
import {useState,useEffect} from "react";
//引入子組件
import DoubleKill from "./DoubleKill";
import TripleKill from "./TripleKill";//函數組件
function App() {// let a=1; //聲明了頁面要使用的數據let [a,setA]=useState(1)let [b,setB]=useState(true)let [arr,setArr]=useState([1,2,3,4,5])let [c,setC]=useState(0)let Com;if(c===0){Com=<DoubleKill/>}else{Com=<TripleKill/>}useEffect(()=>{ //組件一加載就會執行，看做ComponentDidMount，只要數據發生變化它就會執行一次console.log("a---useEffect")},[a])useEffect(()=>{console.log("b---useEffect")},[b])return (<div className="App"><h2>我的react-APP</h2>{/*<h1>{a}</h1><button onClick={()=>{a=2;console.log(a) //頁面并不會更新（因為這里的數據不是響應式數據）}}>修改</button>*/}<h1>{a} / {b?"真":"假"}</h1><ul>{arr.map((v,i)=>{return <li key={i}>{v}</li>})}</ul><button onClick={()=>{let _a=a*2;setA(_a);let _arr=[...arr];_arr.push(arr.length+1);setArr(_arr)// console.log(a,b) 異步}}>修改a / arr</button><button onClick={()=>{setB(!b);}}>修改b</button><hr/><button onClick={()=>{setC(0)}}>展示DoubleKill組件</button><button onClick={()=>{setC(1)}}>展示TripleKill組件</button>{Com}</div>);
}//類組件
/*class App extends Component{render(){return(<div className="App"><h2>我的react-APP</h2></div>)}
}*/export default App;

useEffect

組件掛載后和更新數據后都會執行，并且可以在函數組件中多次使用

useEffect(()=>{ console.log("a---useEffect")
},[a])useEffect(()=>{console.log("b---useEffect")
},[b])

如果只想掛載后執行，更新數據不執行呢？useEffect的第二個參數，是一個數組

useEffect(fn) -----監控所有數據的變化，一旦有數據變化就會執行該函數
useEffect(fn,[]) -----空數組，表示不監控任何數據的變化，只在掛載的時候執行一次
useEffect(fn,[a]) -----監聽某一個數據的變化，只有這個數據變化了，才會再次執行useEffect(()=>{//組件卸載后執行return中的內容return ()=>{//console.log("完畢");}
})

useRef

函數組件中使用useRef拿頁面節點

let p2=useRef(null);
<p ref={p2}>p2</p>
console.log(p2.current); //拿到p2節點

import './App.css';
import {useEffect,useRef} from "react";function App() {let p1=useRef(null); //一般初始值給nulllet p2=useRef(null);useEffect(()=>{console.log(p1.current)console.log(p2.current)})return (<div className="App"><p ref={p1}>p1</p><p ref={p2}>p2</p></div>);
}export default App;