何时使用 useEffect？答案

【问题标题】：When to use useEffect?何时使用 useEffect？
【发布时间】：2019-11-21 23:48:56
【问题描述】：

我目前正在查看 react doc 的 useEffect 示例

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

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

我的问题是我们可以轻松地为按钮制作一个 handleClick 函数。我们不必使用 useEffect

const handleButtonClick = () =>{
setCount(count+1)
document.title = `You clicked ${count +1} times`
}

<button onClick={handleButtonClick}/>

那么哪种方式被认为是好的做法？是否最好只使用 useEffect 来触发严格无法与主效果一起完成的副作用（即组件接收新道具时）

【问题讨论】：

好问题它也让我感到困惑，我看到的例子并没有真正显示出它的优势。

标签： reactjs

【解决方案1】：

你展示了两个不同的例子，

handleButtonClick 在Button 1 单击时触发，而useEffect 在每个状态更改状态时触发（根据依赖数组）。

在下一个示例中，您注意到useEffect 将登录每个按钮单击 (Button 1/2)，而 handleButtonClick 将仅登录 Button 2 单击。

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

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

  useEffect(() => {
    console.log(`You rendered ${count} times`);
  }, [count]);

  const handleButtonClick = () => {
    setCount(count + 1);
    console.log(`You clicked ${count + 1} times`);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Button 1</button>
      <button onClick={handleButtonClick}>Button 2</button>
    </div>
  );
}

在useEffect use cases 上查看类似问题
Refer to useEffect docs

【讨论】：

我明白了。现在说我还有另一个 [count2, setcount2] 状态。我想 setCount2 每次计数更改。同样有两种方法：将 setCount2 添加到每个 onClick（已经有 setCount）或使用 useEffect 捕获计数变化，然后使用 setCount2。我应该采取哪种方法？
第一种方法，当你有 2000 个按钮时你会怎么做？你会检查项目中的所有按钮吗？或者您可以useEffect 一次。考虑下几点来定义“更好的方法”： 1. 可读性。 2. 维护。
是的，但它会导致两次渲染。一个在 setCount 之后，一个在 useEffect 中的 setCount2 之后。如果我将两个 setCount 和 setCount2 分组到一个处理函数中，则该组件应该只呈现一次。我是不是想太多了？
"如果我将两个 setCount 和 setCount2 组合在一个处理函数中，组件应该只渲染一次"，不正确，它会渲染两次，检查一下。
我明白了。所以写干净的代码比节省几毫秒的渲染时间要好

【解决方案2】：

使用useEffect 钩子的想法是执行需要在组件生命周期中发生的代码，而不是在特定的用户交互或 DOM 事件中发生。

例如，您希望设置一个计时器，该计时器在最初呈现组件时执行代码，或者如您的初始示例中所做的那样，当组件安装时更新文档标题，此处没有关联的用户交互

useEffect 是功能组件中类组件中生命周期方法的替代方法。它可用于在组件挂载时执行操作，或为组件更新某些属性或状态，以及在组件即将卸载时执行代码

【讨论】：

【解决方案3】：

请参阅以下内容以获得更清晰的信息。从官方文档中复制代码后，您可能错过了阅读。

Example Using Hooks

useEffect 有什么作用？

通过使用这个 Hook，你告诉 React 你的组件需要在渲染后做一些事情。 React 会记住您传递的函数（我们将其称为“效果”），并在执行 DOM 更新后稍后调用它。在这个效果中，我们设置了文档标题，但我们也可以执行数据获取或调用其他一些命令式 API。

为什么在组件内部调用 useEffect？

在组件中放置 useEffect 可以让我们直接从效果中访问计数状态变量（或任何道具）。我们不需要特殊的 API 来读取它——它已经在函数范围内。 Hooks 包含 JavaScript 闭包，避免在 JavaScript 已经提供解决方案的情况下引入特定于 React 的 API。

useEffect 在每次渲染后运行吗？

是的！默认情况下，它会在第一次渲染后和每次更新后运行。（我们稍后会讨论如何自定义它。）与其考虑“安装”和“更新”，您可能会发现更容易认为效果发生在“渲染后”。 React 保证 DOM 在运行效果时已经更新。

【讨论】：