– 关注前端和node js,分享福利和心得!

react hooks

react hooks最大的改变就是一切皆函数,再也不需要写class类组件了,新引入的hooks函数也会大大简化组件的写法

useState

useState主要是用来声明状态变量

import React,{useState} from "react"
function Demo(){
    const [num,setNum]=useState(0)
    return (
        <div>{count}</div>
        <button onClick={()=>{setNum(count+1)}>add</button>
    )
}
export default Demo

点击按钮,就可以实现+1的效果了,可以看到,使用useState的方式比之前使用类组件的方式简化了很多。

const [num,setNum]=useState(0),表示声明一个变量num,setNum是改变Num的对应方法,useState函数接收的参数0就是变量num的初始值。

useState多状态声明

const [name,setName]=useState('张三')
const [age,setAge]=useState('18')
const [sex,setSex]=useState('男')

可以使用useState同时声明多个状态值,但是需要注意的是,react是根据useState声明的顺序来确定的,所以useState不能出现在if els这样的条件语句中

useEffect

在class类组件中,我们会在生命周期函数中做一些额外的事情,比如axios请求数据,获取dom元素等。在react hooks中,我们写的是函数组件,useEffect就是代替常用的生命周期函数的。

useEffect接收两个参数,第一个是匿名函数,第二个是一个数组

import React,{useState,useEffect} from "react"
function Demo(){
    const [num,setNum]=useState(0)
    useEffect(()=>{
        console.log('useEffect')
    })
    return (
        <div>
            <div>{num}</div>
            <button onClick={()=>{setNum(count+1)}}>add</button>
        </div>
    )
}
export default Demo

react首次渲染和之后每次状态改变时都会调用useEffect函数,而在类组件中需要使用componentDidMount()表示首次渲染 ,componentDidUpdate()表示更新导致的重新渲染,相当与useEffect实现了这两个生命周期函数的功能

useEffect中的函数是异步执行的,不会阻碍浏览器更新视图,而componentDidMount和componentDidUpdate是同步的

  • 解绑useEffect副作用

在类组件中,我们经常需要在组件的componentWillUnmount生命周期(组件即将销毁),清除定时器,清除登录信息等,那怎么实现componentWillUnmount生命周期函数呢

这个时候只需要在useEffect的第一个函数参数中return 一个匿名函数就行了,这个匿名函数就相当于componentWillUnmout生命周期函数了,这样当Demo组件销毁的时候,就会 打印"离开demo"

import React,{useState,useEffect} from 'react'
function Demo(){
    const [num,setNum]=useState(0)
    useEffect(()=>{
        console.log('进入demo')
        return ()=>{
            console.log('离开demo')
        }
    })
    return (
        <div>
            <div>{num}</div>
            <button onClick={()=>{setNum(count+1)}}>add</button>
        </div>
    )
}

通过上面我们知道,当组件首次渲染和更新状态重新渲染时都会执行useEffect函数,这样就会出现问题,当每次改变num时都会执行useEffect函数,都会打印"离开 进入"。

要解决这个问题,就要用到useEffect的第二个数组参数了,数组里可以放多个状态变量,意思是当状态值发生变化时,才进行解绑。当传空数组时,就是当组件被销毁时才进行解绑,也就是实现了componentWillUnmount生命周期的功能。

import React, { useState, useEffect } from 'react'
function Home() {b  
    const [num, setNum] = useState(0)
    useEffect(()=>{
        console.log('进入home')
        return ()=>{
            console.log('离开home')
        }
    },[])
    return (
        <div>
            <div>{num}</div>
            <button onClick={() => { setNum(num + 1) }}>add</button>
        </div>
    )
}

export default Home

useContext

useContext和createContext配套使用,主要是跨组件传递数据,有点类似于react-redux的用法,被包裹的组件都可以使用传递过来的数据,而不需要一层层的通过props传递

import React,{useState,createContext} from "react"
export const CountContext=createContext()
function Demo(){
    const [count,setCount]=useState(0)
    return (
        <div>
            <p>{count}</p>
            <button onClick={()=>{setCount(count+1)}}>add</button>
            <CountContext.Provider value={count}>
                <Child/>
            </CountContext.Provider>
        </div>
    )
}
export default Demo;
<!--child.js-->
import React,{useContext} from "react"
import {CountContext} from "./Demo"
function Child(){
const count=useContext(CountContext)
    return  (
        <div>{count}</div>
    )
}
expoort default Child

最新文章

    热门文章