正文

useEffect代替常用生命周期函数（三）

IP云
IP云V管理员/3 阅读
11/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在用 Class 制作组件时，经常会用生命周期函数，来处理一些额外的事情（副作用：和函数业务主逻辑关联不大，特定时间或事件中执行的动作，比如Ajax请求后端数据，添加登录监听和取消登录，手动修改 DOM 等等）。在 React Hooks 中也需要这样类似的生命周期函数，比如在每次状态（State）更新时执行，它为我们准备了 useEffect 。从这节课开始来认识一下这个 useEffect 函数。它就像一匹野马，当你没有驯服它时，感觉它很难相处甚至无法掌握；但你驯服它后，你会发现它温顺可爱，让你爱不释手。

用 Class 的方式为计数器增加生命周期函数

为了让你更好的理解 useEffect 的使用，先用原始的方式把计数器的Demo增加两个生命周期函数 componentDidMount 和 componentDidUpdate 。分别在组件第一次渲染后在浏览器控制台打印出计数器结果和在每次计数器状态发生变化后打印出结果。代码如下： 

import React, { Component } from 'react';

class Example3 extends Component {

    constructor(props) {

        super(props);

        this.state = { count:0 }

    }

    componentDidMount(){

        console.log(`ComponentDidMount=>You clicked ${this.state.count} times`)

    }

    componentDidUpdate(){

        console.log(`componentDidUpdate=>You clicked ${this.state.count} times`)

    }

    render() {

        return (

            <div>

                <p>You clicked {this.state.count} times</p>

                <button onClick={this.addCount.bind(this)}>Chlick me</button>

            </div>

        );

    }

    addCount(){

        this.setState({count:this.state.count+1})

    }

}

export default Example3;

这就是在不使用Hooks情况下的写法，那如何用Hooks来代替这段代码，并产生一样的效果那。

用 useEffect 函数来代替生命周期函数

在使用 React Hooks 的情况下，我们可以使用下面的代码来完成上边代码的生命周期效果，代码如下（修改了以前的diamond）： 记得要先引入 useEffect 后，才可以正常使用。 

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

function Example(){

    const [ count , setCount ] = useState(0);

    //---关键代码---------start-------

    useEffect(()=>{

        console.log(`useEffect=>You clicked ${count} times`)

    })

    //---关键代码---------end-------

    return (

        <div>

            <p>You clicked {count} times</p>

            <button onClick={()=>{setCount(count+1)}}>click me</button>

        </div>

    )

}

export default Example;

写完后，可以到浏览器中进行预览一下，可以看出跟 class 形式的生命周期函数是完全一样的，这代表第一次组件渲染和每次组件更新都会执行这个函数。 那这段代码逻辑是什么？我们梳理一下:首先，我们生命了一个状态变量 count ,将它的初始值设为0，然后我们告诉react，我们的这个组件有一个副作用。给 useEffecthook 传了一个匿名函数，这个匿名函数就是我们的副作用。在这里我们打印了一句话，当然你也可以手动的去修改一个 DOM 元素。当React要渲染组件时，它会记住用到的副作用，然后执行一次。等Reat更新了State状态时，它再一词执行定义的副作用函数。

useEffect两个注意点

  1. React首次渲染和之后的每次渲染都会调用一遍 useEffect 函数，而之前我们要用两个生命周期函数分别表示首次渲染(componentDidMonut)和更新导致的重新渲染(componentDidUpdate)。

  2. useEffect中定义的函数的执行不会阻碍浏览器更新视图，也就是说这些函数时异步执行的，而 componentDidMonut 和 componentDidUpdate 中的代码都是同步执行的。个人认为这个有好处也有坏处吧，比如我们要根据页面的大小，然后绘制当前弹出窗口的大小，如果时异步的就不好操作了。

转自：https://jspang.com/posts/2019/08/12/react-hooks.html

相关阅读

目录[+]