react+hooks简单使用方法

hooks使用方法

hooks是一种在不编写类函数的情况下使用state(状态) 和其他React功能，目前处于React V16.7.0版本中。

hooks---useState 使用方法

 

import {useState} from "react"

function login(){

　　let [value,setValue]=useState("放的是初始值")

　　/**

　　　*value是使用变量值，

　　　*setValue是修改value的值的，直接调用setValue(修改的值)

　　*/

　　return (

{value}

<button onClick={()=>{setValue(修改得值)}}>点击修改</button>

) }

 

 

可以封装一下这个hooks--useState方法

封装好方法后,抛出一个方，然后调用传入相应的值，然后返回一个对象

 

import {useState,ChangeEvent}from "react"

function useInput(initState:string=""){

　　 let [value,setValue]=useState(initState)

　　return {

　　　　 value,

　　　　 onChange:(e:ChangeEvent)=>{ setValue((e.target as HTMLInputElement).value) }

}}

export default useInput

 

hooks---useContext使用

可以绑定数据库(状态管理),然后可以访问到数据库

 

import {createContext,useContext} from "react"
//从react中引出createContext创建一个钩子
import store from "../redux/index"
//把数据库打包好的一个对象，引过来
export default createContext(store)
//抛出创建的钩子函数
/**
* 也可以直接引入到视图中 let {xxx}=useContext(createContext(store))
* 在试图中可以直接访问相对应的子仓库
*/

 

hooks---useEffect

这个钩子函数，里面包含了在类函数中的 挂在期，更新期，销毁期，这三个阶段，就是每次更新，打开，关闭试图都会触发这各“useEffect”这个钩子函数

 

import {useEffect} from "react"
function xxx(){
    useEffect(){
        console.log("123456")
    }
    return (
        <div>
            出
        </div>
    )
}