什么时候使用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>
);}
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屋!