React+hook

hock是什么:

计算机里面翻译成 钩子,可以理解为vue中的钩子函数,常用useXxxx开头

作用:hook的出现主要是挽救React的函数式组件,在20年之前是没有hook的,React组件的主要是使用为class类组件,虽然class类组件申明方式更加繁琐,但拥有完整的状态,属性,以及生命周期,hook的出现使得函数式组件出现曙光

hook出现后函数式组件:

 状态 useState

1:useState类似于class组件中的this.state,需要定义初始值

2:钩子函数得到一个数组,arr[0]为初始值,可以用结构赋值定义

let [a,setA]=useState(0)

3:arr[1]为事件函数,类似于class类组件中的this.setState()

let Hock = () => {
    let [a,setA]=useState(0)//
    // let show=()=>{
    //    setA(a+1)
    // };
    function show(params) {
        setA(a+1)
    }
    return (
         <div>
             <p>{a}</p>
            {/* <button onClick={()=>{
                return setA(a+1)
            }}>点我+1</button> */}
            <button onClick={show}>点我+1</button>
          </div>
    )}
export default Hock;

 生命周期 useEffect 

1:引入生命周期组件模块:

import React,{Component,useEffect,useState} from 'react'

2 引入history路由发方式,通过组件的来回路由跳转,打印hook生命周期

 let history=useHistory()
 let push=()=>{
 history.goBack()//回跳一步
 // history.replace('/home')  替换路由路径
 //history.goForward()  前进一步,必须搭配 history.goBack()使用}
 //history.go(1)

3 hook的三个状态

 useEffect(()=>{      
  console.log('进来我的页面了')//(1)组件加载完毕   
     return ()=>{      
     console.log('离开myself了')//(2)组件销毁     
   }  
  },[])//这个数组为空时监测数组,如果填了某一个数据,那么就只会监测这一个数据