P03：useEffect代替常用生命周期函数

Posted 2022-01-06 wgchen~

React Hooks

• 阐述
• 用 Class 的方式为计数器增加生命周期函数
• 用 useEffect 函数来代替生命周期函数
• useEffect 两个注意点
• 示例
• • ReactHooksDemo\\demo01\\src\\index.js
  • ReactHooksDemo\\demo01\\src\\Example5.js

阐述

在用Class制作组件时，经常会用生命周期函数，来处理一些额外的事情（副作用：和函数业务主逻辑关联不大，特定时间或事件中执行的动作，比如Ajax请求后端数据，添加登录监听和取消登录，手动修改DOM等等）。

在React Hooks中也需要这样类似的生命周期函数，比如在每次状态（State）更新时执行，它为我们准备了useEffect。

从本文开始来认识一下这个useEffect函数。

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

为了让你更好的理解useEffect的使用，先用原始的方式把计数器的Demo增加两个生命周期函数 componentDidMount 和 componentDidUpdate。

分别在组件第一次渲染后在浏览器控制台打印出计数器结果和在每次计数器状态发生变化后打印出结果。

代码如下：

import React,  Component  from 'react';

class Example4 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 Example4;

这就是在不使用Hooks情况下的写法，我们在浏览器中看一下效果：

那如何用Hooks来代替这段代码，并产生一样的效果那。

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

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

ReactHooksDemo\\demo01\\src\\Example5.js

import React,  useState, useEffect  from 'react';

function Example5()
    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 Example5

写完后，可以到浏览器中进行预览一下，可以看出跟class形式的生命周期函数是完全一样的，这代表第一次组件渲染和每次组件更新都会执行这个函数。

那这段代码逻辑是什么？
我们梳理一下:首先，我们声明了一个状态变量count，将它的初始值设为0，然后我们告诉react，我们的这个组件有一个副作用。

给 useEffecthook 传了一个匿名函数，这个匿名函数就是我们的副作用。

在这里我们打印了一句话，当然你也可以手动的去修改一个DOM元素。当React要渲染组件时，它会记住用到的副作用，然后执行一次。等Reat更新了State状态时，它再一词执行定义的副作用函数。

useEffect 两个注意点

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

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

示例

ReactHooksDemo\\demo01\\src\\index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './Example5';

ReactDOM.render(<Example />, document.getElementById('root'));

ReactHooksDemo\\demo01\\src\\Example5.js

import React,  useState, useEffect  from 'react';

function Example5()
    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 Example5