阅读 713

React Hooks了解一下?超简单入门Hooks

前言

先简单说一下Hooks是什么,在写React组件时候,有两种写法,一种是类写法,一种就是函数写法,Hooks主要服务的对象还是函数组件,因为函数组件相对类组件有些功能确实不好实现,比如生命周期钩子,Hooks就是让函数组件具有类组件能力的一个东西,Hooks的出现会给我们带来另外一种组件实现思路,一直看到有些小伙伴们问Hooks会不会代替Redux,emmm...我觉得这应该不是一个概念吧,这些小伙伴不必担心。

Tips:按照惯例声明,笔者也是入门级选手,所写文章深度不会达到大佬的文章水平,只希望能对像我一样的入门级小伙伴有所帮助。

文字说明会很长,只有例子最明了

先来看一个可以管理状态的组件在React中怎样写

import React from 'react'

class Counter extends React.Component {
    state = {
        count: 0
    }

    componentDidMount() {
        this.interval = setInterval(() => {
            this.setState({
                count: this.state.count + 1
            })
        }, 1000);
    }

    componentWillUnmount() {
        if(this.interval) {
            clearInterval(this.interval)
        }
    }

    render() {
        return (
            <div>count is : {this.state.count}</div>
        )
    }
}

export default Counter;
复制代码

以上代码写了一个简单的计数器组件,管理了一个count状态(就是一个名字叫count的数据),在组件加载完成后,执行定时器,将count状态每秒+1,在组件要被卸载之前清除定时器(不清除会一直占用内存,可能导致内存泄漏)。这里添加定时器和卸载定时器都是通过生命周期钩子来实现的,在Hooks引入之前,函数组件无法使用生命周期函数的,所以无法完成上述的状态管理功能。

引入Hooks,让函数组件也可以完成状态管理

先简单使用两个Hooks,下文还会详细介绍

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

function CounterFunc() {
    const [count, setCount] = useState(0)

    useEffect(() => {
        const interval = setInterval(() => {
            setCount(c => c + 1)
        },1000)

        return () => clearInterval(interval)
    },[])

    return (
        <div>count is : {count}</div>
    )
}

export default CounterFunc;
复制代码

这里直接上了一段代码,在最开头引入了两个函数:useStateuseEffect

在函数组件CounterFunc中,通过useState(0)来设置count的值,这里useState(0)会返回一个数组,数组第一个元素就是被赋值为0的变量,第二个元素是可以对第一个元素重新设置值得函数。我们这里通过数组解构的方式,将这两个元素分别赋值给countsetCount,(如果不了解ES6的解构赋值,请先查阅阮一峰老师ES6书籍的相关部分)。

我们还用了useEffect()函数,在函数里定义了一个定时器,然后返回了一个函数,在返回的函数中清除了定时器,这个被返回的函数就相当于类组件中的componentWillUnmount()生命周子函数了。而这个useEffect()函数本身又相当于componentDidMount()生命周期函数。

至此我们也能很轻松理解useState其实就相当于类组件中设置state的部分,它返回的数组第二个元素setCount()是一个高阶函数,我们需要传入一个c => c + 1作为参数,这个高阶函数会将count传进c => c + 1并将计算后的值重新赋值给count。

State Hooks

useState()

对于状态管理的Hooks,上面已经介绍了useState(),这里会再加一个useReducer(),useReducer才是基础的状态管理Hook

useState(0)

对useState传递的0只是对状态设置了一个默认值,状态改变后他就没用了。

它返回的两个元素我想大家应该也都清楚是什么东西了,但是这里要说的是第二个元素,它有两种用法

  • setCount( 100 )传递一个确定的值
  • setCount( c => c + 1)传递一个函数,我们上面使用的方式

这里说明一下我们上面为什么不用setCount( count + 1 )的方式,有兴趣的小伙伴可以试试,这样我们页面的结果始终都是1,而不是预期的1,2,3...... 为什么会发生这种事?这是由于闭包造成的,在state更新后,会重新执行我们创建的函数组件,这时候const [count, setCount] = useState(0)这段代码会重新执行一遍,count每次都会被重置为0,然后更新为1。

闭包插曲:

上面说到了闭包,本来不想单独说闭包,但是想了想,Hooks应该算是走函数式编程的道路吧,在学Hooks时候,我们会遇到很多奇怪的现象,导致小伙伴感觉很难,其实很大程度上跟没掌握好闭包有很大关系。这里就简单说一下。

Tips: 请注意,如果你看别的文章从未搞懂过闭包,别担心,这里我还是有信心让90%看我文章的人搞清楚什么是闭包。有基础的直接跳过!!!

要说闭包先说作用域

我们这里撇开let,const定义变量的方式,回归初心var 在JavaScript中,ES6出现之前是没有块级作用域的,但是它有个东西叫做函数作用域

var glob = '我是最外层定义的变量'

function func1() {
    console.log(glob) // 这里可以引用上层的变量
    var f1 = '我是func1中的变量'
    
    function func1_1() {
        var f1_1 = '我是函数func1_1中的变量'
        console.log(glob) 
        console.log(f1)  // 这里可以拿到上一层函数中定义的变量和最外层的变量
    }
    function func1_1() {
        console.log(glob) // 这里可以拿到最外层的变量
        console.log(f1_1) // 但是拿不到同一级别函数定义的变量
    }
    
}
复制代码

上面这代码和注释相信能让大家看懂一点JavaScript中的作用域。一个函数,是不能拿到同级别函数里面定义的变量,但是能拿到父级,爷爷级,爷爷爷级函数定义的变量。我们可以利用这里特性对变量进行封装。

function func1(param) {
    var f1 = '只让我的子孙拿到的变量‘
    var f2 = param; // 这里把param赋值给f2,它也只能被自己子孙拿到
    
    function func1_1() {
        console.log(f1, f2) //都能拿到
    }
    
    return func1_1
}

console.log(f1, f2) //两个都拿不到,报错

var res1 = func1('hello') // 你猜他的结果是什么。  

// 它的结果是一个函数,就是我们返回的func1_1这个函数,猜错的自己罚自己,给我点个赞,哈哈哈。

res1() // res1存放的就是返回的func1_1,所以再把它执行一遍 
//打印出 `只让我的子孙拿到的变量hello`

复制代码

其实在我们执行func1('hello')之后,func1的生命周期就结束了,本来,它里面定义的f1,f2都应该在它生命周期结束后就再也访问不到了,但是幸运的是,func1_1替他保存下了这两个变量,使得func1还没有死透

这样封装变量就是闭包。

闭包插曲结束

继续上面的来说

我们可以通过setCount(c => c + 1)传入回调函数的方式避免闭包带来的奇怪现象。

useReducer

function countReducer(state, action) {
    switch(action.type) {
        case 'add': 
            return state + 1;
        case 'minus': 
            return state - 1;
        default:
            return state
    }
}

......
// const [count, setCount] = useState(0)
const [count, dispatchCount] = useReducer(countReducer,0);
......
// setCount(c => c + 1)
dispatchCount({ type: 'add' })
......
复制代码

首先我们先在CounterFunc外面定义一个reducer,然后更改count的定义,以及count的更新,这里useReducer的使用跟 redux中操作很像,后面会持续更新Redux的使用,请有需要的小伙伴关注一下,顺手给个赞。

要注意的是,useReducer(countReducer,0)的两个参数,第一个是定义的countReducer第二个是默认值。我们接收返回值的第二个元素固定写为dispach,或者这里写的dispachCount的格式。

小结

这里主要分享了5个知识点,一个是函数组件与类组件的区别,一个是useState, 再一个useEffect(后面会详细说),然后介绍了闭包,最后说明了useReducer的使用,相信认真看到这里的小伙伴对于React的Hooks已经有了个初步了解,并且对闭包不熟悉的小伙伴也已经对闭包有了深入认识吧。

关注下面的标签,发现更多相似文章
评论