React中Hook详解

React中Hooks是什么？

Hook是React 16.8.0版本新增的新特性/新语法

可以让你在函数组件中使用state以及其它的React特性

import React,{
   use...} from 'react'

常用Hook：
useState ：
接受一个参数: 就是初始化state的状态

	声明一个数组: 
		
		第一个: state的状态
		
		第二个: 修改state的方法

export default function Test (){
   
    const [count, setCount] = useState(0)
    return <div>
        {
   count}
        <button onClick={
   ()=>setCount(count+1)}>操作state</button>
    </div>
}

useEffect

useEffect Hook:
		默认第一个参数：接受一个函数，类似于生命周期，componentDidMount 和 componentDidUpdate

			useEffect(()=>{ console.log("这是Hook") })

		默认第二个参数：如果默认接受一个数组[],如果数组为空 效果 == componentDidMount
		 数据更新就不触发上面方法

		数组里可以接受你要数据更新监听的参数，如果更新状态就触发第一个参数的方法

			useEffect(()=>{ console.log("这是Hook") }，[  ])
		
		在第一个参数方法的返回值 == componentWillunmount()

useEffect(()=>{
    console.log("这是Hook") }，return /* 做一些收尾工作 */), [ count ]}

export default function Test (){
   
    const [count, setCount] = useState(0)

    useEffect(()=>{
   
        console.log("这是Hook")
        return /* 做一些收尾工作 */
    },[count])
    return <div>
        {
   count}
        <button onClick={
   ()=>setCount(count+1)}>操作state</button>
    </div>
}

useRef

useRef：类似于createRef 

const testRef = useRef