1.Hooks 函数组件
1、Hook是React 16.8新推出的新特性/新语法
2、可以让你在函数式组件中使用state或其他特性 === 对函数型组件进行增强,让函数属性可以存储状态state，可以拥有处理副作用effect的能力
一. 函数组件三个常用Hook
- State Hook：React.useState() 状态
- Effect Hook：React.useEffect() 副作用
- 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。
