React的hooks---useEffect

在函数组件主体内(React 渲染阶段)改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的,因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性

useEffect Hook 的使用则是用于完成此类副作用操作。useEffect 接收一个包含命令式、且可能有副作用代码的函数

useEffect函数会在浏览器完成布局和绘制之后,下一次重新渲染之前执行,保证不会阻塞浏览器对屏幕的更新

复制代码
useEffect(didUpdate);

使用:

复制代码
import React, { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  // useEffect 内的回调函数会在初次渲染后和更新完成后执行
  // 相当于 componentDidMount 和 componentDidUpdate
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>count now is {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

等价 class 示例,如下:

useEffect Hook 函数执行时机类似于 class 组件的 componentDidMountcomponentDidUpdate 生命周期,不同的是传给 useEffect 的函数会在浏览器完成布局和绘制之后进行异步执行

复制代码
import React from 'react';

export default class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>count now is {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>+</button>
      </div>
    );
  }
}

清除 effect:

通常情况下,组件卸载时需要清除 effect 创建的副作用操作,useEffect Hook 函数可以返回一个清除函数,清除函数会在组件卸载前执行。组件在多次渲染中都会在执行下一个 effect 之前,执行该函数进行清除上一个 effect

清除函数的执行时机类似于 class 组件componentDidUnmount 生命周期,这的话使用 useEffect 函数可以将组件中互相关联的部分拆分成更小的函数,防止遗忘导致不必要的内存泄漏

复制代码
import React, { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('start an interval timer')
    const timer = setInterval(() => {
      setCount((count) => count + 1);
    }, 1000);
    // 返回一个清除函数,在组件卸载前和下一个effect执行前执行
    return () => {
      console.log('destroy effect');
      clearInterval(timer);
    };
  }, []);

  return (
    <div>
      <p>count now is {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

优化 effect 执行:

默认情况下,effect 会在每一次组件渲染完成后执行。useEffect 可以接收第二个参数,它是 effect 所依赖的值数组,这样就只有当数组值发生变化才会重新创建订阅。但需要注意的是:

  • 确保数组中包含了所有外部作用域中会发生变化且在 effect 中使用的变量

  • 传递一个空数组作为第二个参数可以使 effect 只会在初始渲染完成后执行一次

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

    export default function Counter() {
    const [count, setCount] = useState(0);

    复制代码
    useEffect(() => {
      document.title = `You clicked ${count} times`;
    }, [count]); // 仅在 count 更改时更新
    
    return (
      <div>
        <p>count now is {count}</p>
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>
    );

    }

相关推荐
Dream耀1 分钟前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript
P7Dreamer2 分钟前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js
洋流2 分钟前
0基础进大厂,第12天:ES6语法基础篇
javascript
I'm写代码4 分钟前
el-tree树形结构笔记
javascript·vue.js·笔记
万少5 分钟前
最新 HarmonyOS API 20 知识库 重磅推出
前端
蓝易云12 分钟前
CentOS 7上安装X virtual framebuffer (Xvfb) 的步骤以及如何解决无X服务器的问题
前端·后端·centos
到底起什么网名才能不重名12 分钟前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
然我13 分钟前
面试必问:JS 事件机制从绑定到委托,一篇吃透所有考点
前端·javascript·面试
小蜜蜂嗡嗡22 分钟前
flutter封装vlcplayer的控制器
前端·javascript·flutter
一tiao咸鱼24 分钟前
如何简单使用 prompt
前端·aigc