为什么在没有第二个参数的情况下将代码包装到 "useEffect" 中并且无需清理?
Why wrap code into "useEffect" without second parameter and nothing to clean up?
在我见过的大多数 React 示例中,人们似乎避免将代码直接放入功能组件的 body 中,而是将其包装到 useEffect(() => {...})
中。
例如。 in the official docs:
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
为什么这比简单地写更好:
function Example() {
const [count, setCount] = useState(0);
document.title = `You clicked ${count} times`;
return (...);
}
在这两种情况下,文档标题都将在每次渲染时设置。 (我相信 useEffect()
代码在 渲染后执行 ,但这在这个例子中似乎不相关,对吧)
我理解 useEffect()
的价值,如果:
- 状态作为第二个参数传递,因此代码不会在每次渲染时执行,而是针对指定的状态更改执行。
- 我们利用清理机制。
但是没有那个?还有理由将您的代码包装到 useEffect()
中吗?
useEffect(() => {
document.title = `You clicked ${count} times`;
},[count]);
代码应该是这样的,因为现在 useEffect 只会在计数状态发生变化时调用
在此处查看官方文档 about useEffect hook。 useEffect
类似于 componentDidMount
、componentDidUpdate
和 componentWillUnmount
的组合。它给你任何提示吗?
回答我自己的问题。据我所知,没有理由或理由在代码中没有第二个参数的情况下使用 useEffect()
。
像 reactjs.org 上的教程那样使用它的原因似乎只是出于教育原因:他们可能希望您专注于其他事情,而不是将您与第二个参数混淆。然而,这可能会导致(错误的)印象,即第二个参数并不总是必需的。
再一次,这对我来说是一个教训,教程代码并不总是准备好用于实际项目。同样在实际项目中,像 react-hooks/exhaustive-deps
这样的 lint 规则(默认情况下包含在 create-react-app 中)会立即告诉您 useEffect()
没有第二个参数是不行的。
在我见过的大多数 React 示例中,人们似乎避免将代码直接放入功能组件的 body 中,而是将其包装到 useEffect(() => {...})
中。
例如。 in the official docs:
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
为什么这比简单地写更好:
function Example() {
const [count, setCount] = useState(0);
document.title = `You clicked ${count} times`;
return (...);
}
在这两种情况下,文档标题都将在每次渲染时设置。 (我相信 useEffect()
代码在 渲染后执行 ,但这在这个例子中似乎不相关,对吧)
我理解 useEffect()
的价值,如果:
- 状态作为第二个参数传递,因此代码不会在每次渲染时执行,而是针对指定的状态更改执行。
- 我们利用清理机制。
但是没有那个?还有理由将您的代码包装到 useEffect()
中吗?
useEffect(() => {
document.title = `You clicked ${count} times`;
},[count]);
代码应该是这样的,因为现在 useEffect 只会在计数状态发生变化时调用
在此处查看官方文档 about useEffect hook。 useEffect
类似于 componentDidMount
、componentDidUpdate
和 componentWillUnmount
的组合。它给你任何提示吗?
回答我自己的问题。据我所知,没有理由或理由在代码中没有第二个参数的情况下使用 useEffect()
。
像 reactjs.org 上的教程那样使用它的原因似乎只是出于教育原因:他们可能希望您专注于其他事情,而不是将您与第二个参数混淆。然而,这可能会导致(错误的)印象,即第二个参数并不总是必需的。
再一次,这对我来说是一个教训,教程代码并不总是准备好用于实际项目。同样在实际项目中,像 react-hooks/exhaustive-deps
这样的 lint 规则(默认情况下包含在 create-react-app 中)会立即告诉您 useEffect()
没有第二个参数是不行的。