React 中的 UseEffect 幕后花絮-js教程-PHP中文网

在进一步了解useEffect并深入了解react之前。我建议你熟悉一下 javascript 的这些概念。

https://www.geeksforgeeks.org/top-javascript-concepts-to-know-before-learning-react/

作为 React 开发者，最重要的概念之一就是了解 useEffect 的工作原理。

使用原理效果

UseEffect 用于在我们的 React 组件中执行副作用。

什么是副作用？

副作用是指与 React 组件范围之外的世界交互的任何操作。

当我们需要到达反应组件之外做某事时，我们会执行副作用！！

一些常见的副作用：

从 API 获取数据。
更新 DOM 文档和窗口。
定时器函数setTimeout和setInterval。

react中useEffect的签名：

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

登录后复制

或者仅适用于此代码：

useEffect(() => { 
    // execute side effect
})

登录后复制

在给出了一些关于 useEffect 的基本理论之后，让我们来看看一些实践！！

一个使用 useEffect 的简单示例：

import {useState, useEffect} from "react";

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

    useEffect(() => {
        document.title = `${count} new messages!`;
    })


    return (
        <>
            <h3>{ count } new Messages!</h3>   
            <button onClick={ () => setCount(count + 1) }>Increase</button>
        </>
  )
}

登录后复制

这段代码我们在做什么？

组件最初渲染时计数设置为 0。
useEffect 挂钩将文档标题更新为“0 新消息！”

单击按钮时：

调用 setCount 函数，增加计数状态。
组件使用更新后的计数值重新渲染。
useEffect 钩子再次触发，更新文档标题以反映新的计数。
此代码演示了 React 中 useState 和 useEffect 挂钩的基本用法，用于管理状态和执行副作用，创建一个更新文档标题的简单计数器。

useEffect 将随着组件的每次更改而运行。

UseEffect 与空数组

我们将对代码做一些小改动：

  useEffect(() => {
        document.title = `${count} new messages!`;
        console.log('Run useEffect');
    }, [])

登录后复制

我们在 useEffect 的参数中添加一个空数组。

它只会在组件创建或初始化时运行。

当我们获取数据时它非常有用，在这种情况下我们知道我们应该只运行该部分代码一次。

useEffect 与变量

useEffect 的一种变体是添加一个变量（一个或多个）。
当此变量更改时，部分代码将运行。

让我们看一个例子：

import {useState, useEffect} from "react";

export default function App() {
    const [count, setCount] = useState(0);
    const [newCount, setNewCount] = useState(5);

    useEffect(() => {
        document.title = `${newCount} new messages!`;
        console.log('Run useEffect');
    }, [newCount])


    return (
        <div>
           <>
              <h3>{ count } new Messages!</h3>   
              <button onClick={ () => setCount(count + 1) }>Increase</button>
          </>

          <>
              <h3>{ newCount } new Messages!</h3>   
              <button onClick={ () => setNewCount(newCount + 5) }>Increase</button>
          </>
        </div>

  )
}

登录后复制

我们添加了一个带有 useState 的新变量，并添加了依赖于 newCount 的 useEffect。

在这种情况下将会渲染：

在组件的开头将 newCount 设置为页面标题。
检测到 newCount 变量发生变化后。

注意：您可以添加逗号来传递更多变量

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

登录后复制

UseEffect Behind the scenes in React

具有 cleanUp 功能的 UseEffect

在某些情况下，我们需要清理一些功能，例如承诺。

我们将通过一个例子深入探讨它。

创建一个计时器并在页面中显示。

我们可以使用 setInterval 来做到这一点，但如果我们不实现清理，计时器将消耗资源并且应用程序会很慢。

所以我们必须返回clearInterval。

这里有代码。

useEffect(() => { 
    // execute side effect
})

登录后复制

结论：

关于 useEffect 的小简介。

useEffect.-

UseEffect 用于在 React 组件中执行副作用。

副作用可能是：

从API获取数据
更新 dom - 文档、窗口
计时器事件 - setInterval、setTimeOut

useEffect（回调，依赖项）

1 其中回调是函数 - sideEffect 逻辑 - 运行什么。
2 个依赖项 - 变量数组（可选） - 何时运行。

最后我们有 useEffect 的三种变体：

不带依赖项的 UseEffect - 它在第一次渲染时运行，也可以在检测到任何更改时运行。
UseEffect 与空数组 - 它仅在第一次渲染时运行。
带有变量的 UseEffect - 它在第一次渲染时运行并在变量更改时运行。
具有清理功能的 UseEffect - 超时、订阅、事件侦听器或其他取消订阅或使用后不再需要的功能可以通过清理功能进行处理。

以上是React 中的 UseEffect 幕后花絮的详细内容。更多信息请关注PHP中文网其他相关文章！