1.Hooks 函數(shù)組件

1、Hook是React 16.8新推出的新特性/新語法
2、可以讓你在函數(shù)式組件中使用state或其他特性 === 對函數(shù)型組件進(jìn)行增強(qiáng),讓函數(shù)屬性可以存儲(chǔ)狀態(tài)state，可以擁有處理副作用effect的能力

一. 函數(shù)組件三個(gè)常用Hook

1. State Hook：React.useState() 狀態(tài)
2. Effect Hook：React.useEffect() 副作用
3. Ref Hook：React.useRef() 獲取DOM

1、React.useState（） 用于為函數(shù)組件引入state狀態(tài), 并進(jìn)行狀態(tài)數(shù)據(jù)的讀寫操作

//useState()中接收的是state的默認(rèn)值，前面是數(shù)組解構(gòu)，第一個(gè)是state變量，第二個(gè)是改變state的方法，類似于setState（）
const [count,setCount] =useState( 0 )

import { useState, useEffect, useReducer } from 'react'
const [state, setstate] = useState(initialState)
let [num, setNum] = useState(0)

./user.js
const user = { 
     test:'測試',
     userInfo:{
         name:'yzs',
         job:'web'
     }
}
export default  user
<!-- 引入 -->
import myState from './state.js'
<!-- 使用 -->
let [state,setState] = useState(myState)
let {test, userInfo} = state

2、React.useEffect（） 讓函數(shù)組件擁有處理副作用的能力，類型生命周期函數(shù)

useEffect(()=>{}，參數(shù)2)
參數(shù)2：
1.如果不寫，相當(dāng)于監(jiān)聽全部即組件掛載和更新時(shí)都會(huì)調(diào)用
2.如果是[],相當(dāng)于不監(jiān)聽，只在組件掛載時(shí)調(diào)用
3.如果寫[count，name],相當(dāng)于只監(jiān)聽count和name的變化，在組件掛載、count和name更新 時(shí)調(diào)用

useEffect(()=>{}) ===> componentDidMount、componentDidUpdate;
useEffect(()=>{},[觀察的元素]) ===> componentDidMount,數(shù)據(jù)更新時(shí)被調(diào)用;
useEffect(()=>()=>{}) ===> componentDidWillUnmount

3、React.useRef（） 可以在函數(shù)組件中獲取標(biāo)簽元素 ref

import{ useRef,useEffect} from "react";
const RefComponent = () => {
    let inputRef = useRef(null);
    useEffect(() => {
        inputRef.current.focus();
    })
    return (
        <input type="text" ref={inputRef}/>
    ) 
}

注意事項(xiàng)

只在最頂層使用Hook：不要在循環(huán)、條件或嵌套函數(shù)中調(diào)用Hook，確?？偸窃赗eact函數(shù)的最頂層以及任何return之前調(diào)用他們
只在React函數(shù)中調(diào)用Hook：不要在普通的JavaScript函數(shù)中調(diào)用Hook。