react中Hooks的使用

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 (
        <div>
            <p>{count}</p>
            <div>
                <button onClick={add}>点击</button>
            </div>
        </div>
    )
}

Effect Hook的使用

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

//副作用操作
1.发送ajax请求
2.设置订阅/启动定时器、移除定时器
...等等
//语法 /** * 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的回调函数都会执行,相当于 componentDidMountcomponentDidUpdate这两个生命周期函数,在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> ) }