首页 > 其他分享 >React中useEffect钩子

React中useEffect钩子

时间:2024-10-11 09:17:28浏览次数:11  
标签:依赖 函数 钩子 React 组件 数组 副作用 useEffect

  • 副作用:渲染以外的操作:像后端获取数据、操作DOM
  • 参数:副作用方法、依赖(改变时重新执行)
  • 调用时间:渲染JSX之后/依赖改变

useEffect 是 React 中的一个 Hook,用于在函数组件中执行副作用操作。副作用操作包括数据获取、订阅或手动更改 React 组件中的 DOM 等。useEffect 使得在函数组件中处理这些操作变得简单而强大。

基本用法

useEffect 接受一个函数和一个依赖数组作为参数。当依赖数组中的任何值发生变化时,该函数将被重新执行。如果没有提供依赖数组,则该函数将在每次渲染后执行。

import React, { useState, useEffect } from 'react';  
  
function Example() {  
  const [count, setCount] = useState(0);  
  
  useEffect(() => {  
    // 副作用操作  
    document.title = `You clicked ${count} times`;  
  
    // 清理函数(可选)  
    return () => {  
      // 组件卸载或依赖项变化前执行的清理操作  
      console.log('Clean up');  
    };  
  }, [count]); // 只有当 count 变化时,副作用操作才会重新执行  
  
  return (  
    <div>  
      <p>You clicked {count} times</p>  
      <button onClick={() => setCount(count + 1)}>  
        Click me  
      </button>  
    </div>  
  );  
}

详解

  1. 副作用函数
    • useEffect 第一个参数是一个函数,该函数中包含了所有副作用操作。
    • 这些操作可以是数据获取、订阅外部数据源、手动操作 DOM 等。
  2. 依赖数组
    • 第二个参数是一个依赖数组(依赖项)。
    • 当数组中的某个依赖项发生变化时,副作用函数会重新执行。
    • 如果省略这个数组,副作用函数会在每次渲染后执行。
  3. 清理函数
    • 副作用函数可以返回一个函数,这个函数会在组件卸载或下次副作用执行前执行。
    • 常用于取消订阅、清除计时器、还原之前的手动 DOM 操作等。
  4. 空依赖数组
    • 如果依赖数组为空 [],则副作用函数只会在组件挂载和卸载时执行一次。
    • 这类似于类组件中的 componentDidMount 和 componentWillUnmount
  5. 多个 useEffect
    • 你可以在一个组件中使用多个 useEffect 来分离不同的副作用逻辑。
    • 每个 useEffect 都可以有自己的依赖数组和清理函数。

注意事项

  • 避免在副作用函数中直接修改状态
    • 副作用函数应该只包含副作用操作,如数据获取、订阅等。
    • 状态更新应该通过事件处理函数或其他 React 机制来进行。
  • 确保清理函数无副作用
    • 清理函数中的操作应该是幂等的,即多次执行相同操作不会改变状态或导致错误。
  • 依赖项要准确
    • 确保依赖数组包含所有影响副作用函数行为的变量,以避免不必要的副作用执行。

示例

以下是一个包含多个 useEffect 的示例,分别处理数据获取和手动 DOM 操作:

import React, { useState, useEffect } from 'react';  
  
function DataFetcher() {  
  const [data, setData] = useState(null);  
  const [input, setInput] = useState('');  
  
  useEffect(() => {  
    // 数据获取副作用  
    fetch(`https://api.example.com/data?query=${input}`)  
      .then(response => response.json())  
      .then(result => setData(result))  
      .catch(error => console.error('Error fetching data:', error));  
  }, [input]); // 仅在 input 变化时重新获取数据  
  
  useEffect(() => {  
    // 手动 DOM 操作副作用  
    const element = document.getElementById('focusElement');  
    if (element) {  
      element.focus();  
    }  
  
    // 清理函数  
    return () => {  
      if (element) {  
        element.blur();  
      }  
    };  
  }, []); // 只在组件挂载和卸载时执行  
  
  return (  
    <div>  
      <input  
        type="text"  
        value={input}  
        onChange={e => setInput(e.target.value)}  
        placeholder="Search..."  
      />  
      {data ? (  
        <div>  
          <h1>{data.title}</h1>  
          <p>{data.description}</p>  
          <input id="focusElement" type="text" placeholder="Auto-focused" />  
        </div>  
      ) : (  
        <p>Loading...</p>  
      )}  
    </div>  
  );  
}

useEffect 是 React 函数组件中的一个 Hook,用于执行副作用操作。副作用操作是那些不在 React 渲染过程中的操作,比如数据获取、订阅外部数据源、手动更改 DOM 等。useEffect 使得在函数组件中处理这些操作变得简单而强大。

useEffect 的基本用法

useEffect 接受一个函数(副作用函数)和一个依赖数组作为参数。当依赖数组中的任何值发生变化时,副作用函数会重新执行。如果省略依赖数组,副作用函数会在每次组件渲染后都执行。

useEffect(() => {  
  // 副作用操作  
  return () => {  
    // 清理操作(可选)  
  };  
}, [dependency1, dependency2, ...]); // 依赖数组

依赖数组

依赖数组是 useEffect 的第二个参数,它是一个包含依赖项的数组。这些依赖项通常是组件的状态变量或 props。当数组中的任何一个依赖项发生变化时,React 会重新调用 useEffect 中的副作用函数。

  • 如果依赖数组为空[]),则副作用函数只会在组件挂载(componentDidMount 等效)和卸载(componentWillUnmount 等效)时执行一次。
  • 如果依赖数组包含状态变量或 props,则每当这些依赖项变化时,副作用函数会重新执行。

注意事项

  • 副作用函数内部不应该直接修改状态或触发其他副作用,因为这可能会导致无限循环或其他难以调试的问题。状态更新应该通过事件处理函数或其他 React 机制来进行。
  • 清理函数(useEffect 返回的函数)用于在副作用函数执行完毕后进行清理操作,比如取消订阅、清除计时器等。它会在组件卸载或下次副作用执行前执行。
  • 依赖数组应该包含所有影响副作用函数行为的变量,以避免不必要的副作用执行。

示例

以下是一个使用 useEffect 和依赖数组的示例,用于在组件挂载时获取数据,并在数据变化时更新 UI

import React, { useState, useEffect } from 'react';  
  
function DataFetcher() {  
  const [data, setData] = useState(null);  
  const [query, setQuery] = useState('');  
  
  useEffect(() => {  
    // 数据获取副作用  
    fetch(`https://api.example.com/data?query=${query}`)  
      .then(response => response.json())  
      .then(result => setData(result))  
      .catch(error => console.error('Error fetching data:', error));  
  }, [query]); // 依赖数组包含 query,当 query 变化时重新获取数据  
  
  return (  
    <div>  
      <input  
        type="text"  
        value={query}  
        onChange={e => setQuery(e.target.value)}  
        placeholder="Search..."  
      />  
      {data ? (  
        <div>  
          <h1>{data.title}</h1>  
          <p>{data.description}</p>  
        </div>  
      ) : (  
        <p>Loading...</p>  
      )}  
    </div>  
  );  
}

标签:依赖,函数,钩子,React,组件,数组,副作用,useEffect
From: https://blog.csdn.net/m0_55049655/article/details/142831307

相关文章

  • ant design react 表单设置初始值及更新表单数据
    importReactfrom'react';import'./index.css';import{Button,Form,Input}from'antd';constApp=()=>{const[form]=Form.useForm();constupdateValue=()=>{//假设我们要更新的字段是'username'......
  • Nuxt.js 应用中的 page:transition:finish 钩子详解
    title:Nuxt.js应用中的page:transition:finish钩子详解date:2024/10/10updated:2024/10/10author:cmdragonexcerpt:page:transition:finish是Nuxt.js中的一个事件钩子,专门用于处理页面过渡效果结束后的逻辑。这一钩子在页面过渡的onAfterLeave事件之后被调用,允......
  • react中CodeMirror (代码编辑器)
    ​ 前言:实现一个在react项目中页面展示代码编辑器的效果。codemirror:使用JavaScript为浏览器实现的多功能文本编辑器。codemirror作用:专门用于编辑代码,并带有实现更高级编辑功能的多种语言模式和附加组件实现效果​编辑1.首先从react-codemirror2中引入Codemir......
  • react 路由
    安装ReactRouternpminstallreact-router-dom在入口文件main.jsx配置首先在react项目的入口文件index.js文件中,使用BrowserRouter将包裹起来import{StrictMode}from"react";import{BrowserRouter}from"react-router-dom";import{createRoot}from"......
  • 解释 Vue 3 中的 `errorCaptured` 钩子的用途和使用方法。
    Vue3中的errorCaptured钩子的用途和使用方法在Vue3中,errorCaptured是一个生命周期钩子,它允许你捕获并处理组件内部或子组件中发生的错误。这个钩子可以在组件的任何级别上使用,并且对于全局错误处理非常有用。errorCaptured的用途全局错误处理:你可以在Vue应用......
  • 如何将React项目,部署到Web服务器的Tomcat 上
    将React应用部署到Tomcat服务器上通常需要将其构建为静态文件,然后将这些文件放入Tomcat的webapps目录。以下是具体步骤:步骤指南1.构建React应用首先,你需要在本地构建你的React应用。npmrunbuild这会在项目根目录下生成一个build文件夹,里面包含了优化......
  • SVN提交约束(钩子脚本)Windows环境
    将check.py和pre-commit.bat文件放到svn路径下的hooks文件夹下,其中check.py为格式 pre-commit.bat为windows环境下执行脚本文件校验正则格式为:r'^项目:.+\n修改内容:.+\n修改时间:\d{4}-\d{2}-\d{2}\n修改人:.+$check.py内容:importreimportsysmessage=sys.stdin.re......
  • React Native性能剖析:Flipper工具使用
    文章目录Flipper工具简介安装Flipper连接Flipper使用Flipper分析性能ReactNative插件Network插件Layout插件HeapGraph插件GraphQL插件实战案例分析案例1:性能瓶颈定位案例2:内存泄漏检测优化代码再次使用Flipper分析进阶技巧性能优化技巧内存优化技巧......
  • Nuxt.js 应用中的 page:finish 钩子详解
    title:Nuxt.js应用中的page:finish钩子详解date:2024/10/9updated:2024/10/9author:cmdragonexcerpt:page:finish是Nuxt.js中用于处理页面加载完成事件的钩子,特别是与Suspense机制相关。这个钩子允许开发者在页面加载完成后执行自定义操作,以优化用户体验或进行......
  • React学习起始
    一、准备工作react是一个用于构建用户界面的JavaScript库脚手架安装:npxcreate-react-app(脚手架名称)react-basic(包名)--------等同于maven构建项目的性质启动项目:yarnstartornpmstart注:全局安装缺点:太久没初始化项目,就得重新装 二、基本使用1导包2创建元素3渲染元......