什么时候使用useEffect? [英] When to use useEffect?

问题描述

我目前正在查看关于 useEffect 的 react 文档示例

import React, { useState, useEffect } from 'react';函数示例(){const [count, setCount] = useState(0);//类似于 componentDidMount 和 componentDidUpdate:useEffect(() => {//使用浏览器 API 更新文档标题document.title = `您点击了 ${count} 次`;});返回 (<div><p>您点击了 {count} 次</p><button onClick={() =>setCount(count + 1)}>点击我

);}

我的问题是，我们可以轻松地为按钮创建一个 handleClick 函数.我们不必使用useEffect

const handleButtonClick = () =>{设置计数(计数+1)document.title = `您点击了 ${count +1} 次`}<button onClick={handleButtonClick}/>

那么哪种方式被认为是好的做法?是否最好只使用 useEffect 来触发严格不能与主要效果一起完成的副作用(即当组件收到新道具时)

解决方案

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

handleButtonClick 在 Button 1 点击时触发，而 useEffect 在每个状态改变状态时触发(根据依赖数组).

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

import React, { useState, useEffect } from "react";函数示例(){const [count, setCount] = useState(0);useEffect(() => {console.log(`你渲染了 ${count} 次`);}， [数数]);const handleButtonClick = () =>{设置计数(计数 + 1)；console.log(`你点击了 ${count + 1} 次`);};返回 (<div><p>您点击了 {count} 次</p><button onClick={() =>setCount(count + 1)}>按钮 1</button><button onClick={handleButtonClick}>Button 2</button>

);}

• 检查 useEffect 用例
• 参考useEffect文档

I'm currently looking at the react doc's example for 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>
  );
}

My question is that we can easily make a handleClick function for the button. We don't have to use useEffect

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

<button onClick={handleButtonClick}/>

So which way is considered good practice? Is it best to only use useEffect to trigger side effects that strictly couldn't be done along with the main effect(i.e when component receive new prop)

解决方案

You showed two different examples,

handleButtonClick fires on Button 1 click, while useEffect fires on every state change state (according to the dependency array).

In the next example, you notice that useEffect will log on every button click (Button 1/2), and handleButtonClick will log only on Button 2 click.

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

• Check similar question on useEffect use cases
• Refer to useEffect docs

这篇关于什么时候使用useEffect?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！