react中使用Hooks

Hook/Hooks是什么

Hook是React 16.8版本新增加的特性、语法 可以让你在不使用class的情况下（函数式组件）使用 state以及其他React特性（生命周期钩子等等）

三个常用的Hook

1. State Hook: React.useState();
2. Effect Hook: React.useEffect();
3. Ref Hook: React.useRef();

stateHook的使用

stateHook让函数组件也可以有state状态，并进行状态数据的读写操作

import React from 'react'

export default function Home() { //使用StateHook /**

• useState
• 参数：第一次初始化指定的值在内部缓存

• 返回值：包含两个元素的数组，第一个为内部当前的状态，第二个为更新状态的方法（函数） */ let [count,setCount] = React.useState(0);

  function add(){ setCount(count+1); }

  return (

  {count}

  点击

  ) }

##### Effect Hook的使用
> Effect Hook 可以让你在函数组件中执行副作用操作（模拟类式组件中的生命周期）
类似于componentDidMount和componentDidUpdate

//副作用操作 1.发送ajax请求 2.设置订阅/启动定时器、移除定时器 ...等等

```javascript
//语法
/**
 * useEffect 接收两个参数
 * 第一个为回调函数，会在组件挂载，以及组件更新时调用
 * 第二个为数组，检测某个state值的改变，如果指定为[]，回调函数只会在挂载时调用(相当于componentDidMount)
 * callback 返回一个新的函数，用于清空定时器、清除订阅等操作，类似于class组件的componentWillUnmount 
*/
useEffect(callback,[stateVal]);

//通过解构赋值拿到useState、useEffect
import React,{useState,useEffect} from 'react'

export default function Home() {
    //使用StateHook
    /**
     * useState
     * 参数：第一次初始化指定的值在内部缓存
     * 返回值：包含两个元素的数组，第一个为内部当前的状态，第二个为更新状态的方法（函数）
     */
    let [count,setCount] = React.useState(0);
    function add(){
        setCount(count+1);
    }
    //使用EffectHook
    /**
     * 默认情况下，useEffect会在组件挂载和更新之后，触发回调
     * 相当于 componentDidMount和componentDidUpdate这两个生命周期函数
     */
    useEffect(()=>{
        console.log("effect");
        //useEffect 返回一个函数，可以用于清除定时器等
        return ()=>{
            //模拟componentWillUnmount
        }
    },[])

    return (
        <div>
            <input type="text" placeholder="请输入"/>
            <p>{count}</p>
            <div>
                <button onClick={add}>点击</button>
            </div>
        </div>
    )
}

默认情况下，在组件挂载和更新的情况下，useEffect的回调函数都会执行，相当于 componentDidMount==和==componentDidUpdate==这两个生命周期函数，在callbanck中返回一个函数，可以模拟==componentWillUnmount生命周期钩子，用来做一些组件将要卸载的收尾工作

Ref Hook

Ref Hook可以在函数组件中存储、查找组件内的标签 保存标签元素 例如：获取input输入框的值

//通过解构赋值拿到useState、useEffect
import React,{useState,useEffect,useRef} from 'react'

export default function Home() {
    //使用StateHook
    /**
     * useState
     * 参数：第一次初始化指定的值在内部缓存
     * 返回值：包含两个元素的数组，第一个为内部当前的状态，第二个为更新状态的方法（函数）
     */
    let [count,setCount] = React.useState(0);
    //使用EffectHook
    /**
     * 默认情况下，useEffect会在组件挂载和更新之后，触发回调
     * 相当于 componentDidMount和componentDidUpdate这两个生命周期函数
     */
    useEffect(()=>{
        console.log("effect");
        //useEffect 返回一个函数，可以用于清除定时器等
        return ()=>{
            //模拟componentWillUnmount
        }
    },[])
    //Ref Hook 使用
    /***
     * 语法 useRef() 类似于React.createRef();
     * 可以用于保存标签对象 功能与React.createRef 一样
     */
    let myRef = useRef();
    function show(){
        console.log(myRef.current.value);
    }
    return (
        <div>
            <input type="text" placeholder="请输入" ref={myRef}/>
            <p>{count}</p>
            <div>
                <button onClick={show}>获取input输入框的值</button>
            </div>
        </div>
    )
}