Question

我目前正在查看React文档的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来触发严格不能与主要效果一起发生的副作用（即，当组件收到新的道具时）

Answer 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>
  );
}

Refer to useEffect docs

Answer 2

请参阅以下内容，以更清楚。从官方文档复制代码后，您可能会错过阅读的内容。

Example Using Hooks

useEffect有什么作用？

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

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

在组件内部放置useEffect，使我们可以直接从效果访问count状态变量（或任何道具）。我们不需要特殊的API即可读取它-它已经在函数范围内。挂钩包含JavaScript闭包，并避免在JavaScript已经提供解决方案的地方引入React特定的API。

useEffect是否在每次渲染后运行？

是的！默认情况下，它在第一次渲染后和每次更新后都运行。（我们将在后面讨论如何自定义此功能。）您可能会发现更容易想到效果发生在“渲染后”，而不是“安装”和“更新”。 React保证DOM在运行效果时已被更新。

Answer 3

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

例如，您希望设置一个计时器，以在最初呈现组件时或在初始示例中完成时执行代码，在安装组件时更新文档标题，此处没有用户交互

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

何时使用useEffect？

3 个答案: