1.Hooks 函数组件

1、Hook是React 16.8新推出的新特性/新语法
2、可以让你在函数式组件中使用state或其他特性 === 对函数型组件进行增强,让函数属性可以存储状态state，可以拥有处理副作用effect的能力

一. 函数组件三个常用Hook

1. State Hook：React.useState() 状态
2. Effect Hook：React.useEffect() 副作用
3. Ref Hook：React.useRef() 获取DOM

1、React.useState（） 用于为函数组件引入state状态, 并进行状态数据的读写操作

//useState()中接收的是state的默认值，前面是数组解构，第一个是state变量，第二个是改变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（） 让函数组件拥有处理副作用的能力，类型生命周期函数

useEffect(()=>{}，参数2)
参数2：
1.如果不写，相当于监听全部即组件挂载和更新时都会调用
2.如果是[],相当于不监听，只在组件挂载时调用
3.如果写[count，name],相当于只监听count和name的变化，在组件挂载、count和name更新 时调用

useEffect(()=>{}) ===> componentDidMount、componentDidUpdate;
useEffect(()=>{},[观察的元素]) ===> componentDidMount,数据更新时被调用;
useEffect(()=>()=>{}) ===> componentDidWillUnmount

3、React.useRef（） 可以在函数组件中获取标签元素 ref

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

注意事项

只在最顶层使用Hook：不要在循环、条件或嵌套函数中调用Hook，确保总是在React函数的最顶层以及任何return之前调用他们
只在React函数中调用Hook：不要在普通的JavaScript函数中调用Hook。